Стильные вдохновляющие всплывающие подсказки

Оригинал: 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 на нажатие. Правильным действием также будет позиционирование подсказки, чтобы она не оказалась за границей экрана. Вот несколько полезных решений.

• Tipped
• jQuery UI Tooltip
• CSS Tooltips built on Tether
• jQuery Tooltipsy
• jQuery PowerTip
• Opentip

Давайте посмотрим на стиль всплывающей подсказки, который мы назвали «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);
}

И всё это делает изысканную подсказку уникальной формы.

Надеемся, вам понравились эти стили и вы вдохновились.