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



Мери Лу

Оригинал: 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);
}

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.