Стильні натхненні спливаючі підказки

Мері Лу

Оригінал: http://tympanus.net/codrops/2014/10/07/tooltip-styles-inspiration/

Переклад: Влад Мержевич

Сьогодні ми хочемо поділитися з вами деякими стилями та ефектами для створення висувних підказок. Вони зазвичай використовуються для відображення додаткової інформації і зустрічаються практично на кожному сайті. Ці маленькі помічники відкривають широкі можливості для додавання вишуканих та унікальних ефектів до будь-якого дизайну. Тож сьогодні ми покажемо вам деякі можливості стилізації висувних підказок.

Переглянути демо

Завантажити вихідники

Ми використовуємо лише CSS-переходи через :hover а також трохи SVG для створення унікальної форми підказки. Іконки взяті з Font Awesome, а зображення профілю з Random User Generator.

Зверніть увагу, що ми використовуємо декілька сучасних стилів, наприклад, 3D-трансформації, які працюють лише в нових браузерах.

Також виникає проблема в Firefox з кривими SVG при використанні відсотків як значень для transform-origin. Ви можете не побачити правильний ефект трансформації, тому рекомендуємо скористатися Google Chrome, в ньому всі приклади працюють коректно.

Приклади зроблені лише на CSS і застосовують :hover для відображення висувної підказки, що не працює для мобільних пристроїв. Ви можете використовувати JavaScript для заміни :hover на натискання. Також важливо правильно позиціонувати підказку, щоб вона не вийшла за межі екрана. Ось декілька корисних рішень.

Давайте подивимося на стиль висувної підказки, який ми назвали «sharp». Розмітка буде наступною.

<blockquote>
  <p>A man of my <span class="tooltip tooltip-turnright"><span class="tooltip-item">spiritual</span><span 
  class="tooltip-content"><strong>[spir·it·u·al]</strong> 
  affecting the human spirit or soul as opposed to material or physical things</span></span> intensity does not 
  eat <span class="tooltip tooltip-turnleft"><span class="tooltip-item">corpses</span><span 
  class="tooltip-content"><strong>[corpse]</strong> dead 
  body, body, carcass, skeleton, remains, mortal remains, rotten bacon</span></span>.</p>
  <footer><span class="tooltip tooltip-turnright"><span class="tooltip-item">George 
  Bernard Shaw</span><span class="tooltip-content"><strong>George 
  Bernard Shaw</strong> (26 July 1856 – 2 November 1950) was an Irish playwright and a 
  co-founder of the London School of Economics.</span></span></footer>
</blockquote>

У нас є два варіанти підказок: ті, у яких наконечник зліва; і ті, у яких він повернутий направо. У цьому прикладі ми використовуємо форму SVG.

Тепер подивимося на CSS.

@import url(http://fonts.googleapis.com/css?family=Kalam:700,400);
.tooltip {
  position: relative;
  z-index: 999;
}

А це наш переключний текст. 

.tooltip-item {
  font-weight: bold;
  cursor: pointer;
}

Зміст висувної підказки має закруглені краї та гострий наконечник. Ми позиціонуємо все абсолютно прямо над текстом, а потім відрегулюємо положення через margin. Ширину при цьому фіксуємо, а висота буде збільшуватися за необхідності. Попередньо все робимо прозорим.

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 9999;
  margin: 0 0 105px -140px;
  padding: 25px;
  width: 280px;
  border-radius: 10px/50%;
  background: #fff;
  color: #dd5864;
  text-align: left;
  font-size: 16px;
  opacity: 0;
  cursor: default;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

Залежно від положення наконечника встановимо відповідне обертання змісту. Ми хочемо, щоб обертання відбувалося разом з наконечником, створюючи ефект «відкриття». 

.tooltip-turnright .tooltip-content {
  transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg);
}
.tooltip-turnleft .tooltip-content {
  transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
}

При наведенні курсора на текст показуємо зміст.

.tooltip:hover .tooltip-content {
  opacity: 1;
  transform: translate3d(0,0,0);
  pointer-events: auto;
}

Тепер подивимося на наконечник. Використовуємо псевдоелемент ::after для додавання наконечника через SVG. 

.tooltip-content::after {
  position: absolute;
  top: 100%;
  width: 60px;
  height: 120px;
  background: url(../img/tooltip3.svg) no-repeat center center;
  background-size: 100%;
  content: '';
  transition: transform 0.3s;
  transform-origin: 50% 0;
}

Залежно від того, куди спрямований наконечник, встановлюємо й обертання. Зверніть увагу, що ми використовуємо scale3d(-1,1,1) для правого наконечника. Це спосіб для «дзеркального відображення» елемента через CSS. 

.tooltip-turnright .tooltip-content::after {
  left: 25%;
  transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}
.tooltip-turnleft .tooltip-content::after {
  right: 25%;
  transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}

При наведенні курсора ми повертаємо трансформації в кінцеве положення.

.tooltip-turnright:hover .tooltip-content::after {
  transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0);
}
.tooltip-turnleft:hover .tooltip-content::after {
  transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
}

Це робить вишукану підказку унікальної форми.

Сподіваємося, вам сподобались ці стилі та ви були надихнені.

CSS3

Часті запитання