Всплывающая подсказка с помощью CSS

tooltipВ этом уроке вы узнаете, как сделать всплывающую подсказку при наведении на кнопку с помощью CSS. Текст всплывающей подсказки будет генериться за счёт значения пользовательского атрибута данных — data-tooltip="текст подсказки". Для работы потребуется подключить к странице шрифт FontAwesome и шрифт Open Sans от Google.

Разметка HTML

<a href="" data-tooltip="600Кб">
  <span>
    <em>Скачать</em><i class="fa fa-cloud-download"></i>
  </span>
</a>
tooltip-2
Рис. 1 Элементы всплывающей подсказки

Стили CSS

*, *:before, *:after {
  box-sizing: border-box;
  transition: .4s ease-in-out;
}
a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: white;
  position: relative;
  background: #3C4896;
  display: block;
  width: 200px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid transparent;
  margin: 80px auto 0;
}
a:hover {
  background: white;
  border: 2px solid #3C4896;
}
/* скроем иконку загрузки до наведения на кнопку и текст "Скачать" после наведения на кнопку */
span {
  overflow: hidden;
}
span, em, i.fa {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 46px; /* за вычетом границ кнопки */
}
em {
  top: 0;
  font-style: normal;
}
i.fa {
  top: 100%; /* смещаем вниз */
  font-size: 30px;
  color: #3C4896;
}
a:hover em { 
  top: -100%; /* смещаем вверх */
}
a:hover i.fa {
  top: 0;
}
/* делаем подсказку прозрачной и убираем её со страницы, чтобы она не появлялась при наведении на место, где она должна появиться */
a:before, a:after{
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
/* стили для всплывающего блока с текстом */
a:before{
  content: attr(data-tooltip);
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #3C4896;
  border-radius: 5px;
  bottom: 90px;
  left: calc(50% - 70px);
}
/* стили для стрелки */
a:after {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #3C4896;
  bottom: 70px;
  left: calc(50% - 10px);
}
a:hover:before, a:hover:after {
  opacity: 1;
  visibility: visible;
  transition: .2s ease-in-out .4s; /* сделаем появление подсказки с задержкой */
}
/* добавляем эффект движения */
a:hover:before {
  bottom: 70px;
}
a:hover:after {
  bottom: 50px;
}

See the Pen QKLLkW by Elena (@html5book) on CodePen.

  • PaSHA SHeremetev

    Хорошая реализация.
    А как заставить всплывающую подсказку адаптироваться под длину текста. (Например, чтобы вместо 600 Кб было «Документ PDF, 600 Кб)

    • немного изменим:
      a:before{
      content: attr(data-tooltip);
      padding: 10px;
      display: block;
      white-space: nowrap;
      background: #3C4896;
      border-radius: 5px;
      bottom: 90px;
      transform: translateX(-50%);
      margin-left: 50%;
      }
      и текст в data-tooltip=»Документ PDF, 600Кб»
      Сам пример: http://codepen.io/nazarelen/pen/JKyQdL

      • PaSHA SHeremetev

        Уже совсем почти замечательно).. ещё бы подсказка по центру встала

        • ? Что не по центру ?

          • PaSHA SHeremetev

            Опа. я ивиняюсь, Елена.
            Сейчас перепроверил — во всех бракзерах, кроме Maxthon показывает правильно. В макстоне визуально я наблюдал, что a:before было смещено относительно центра вправо.

          • Вы наверное, слишком серьёзно подходите к тестированию. Я посмотрела свою статистику — за год 0,18% посетителей с таким браузером. К тому же ни разу не встречала в спецификации css-свойств упоминание о поддержки свойств этим браузером.

          • PaSHA SHeremetev

            Да как сказать. Не столь серьезно, но Макстон довольно продолжительное время был основным моим браузером. И не было нареканий. Другое дело, что последние релизы 4ки не критикует только ленивый из-за потери скорости и прочих глюков. Сейчас ушел на Oper`у.
            ——————————————
            Елена спасибо вам за отзывчивость, компетентность и, главное, за КАЧЕСТВЕННЫЕ ответы!

          • Спасибо, приятно)))

          • PaSHA SHeremetev

            вот скрин

  • Пример красивый, но, к сожалению, в нем очень много не относящегося к всплывающей подсказке. Новичкам будет тяжело выделить код, относящийся непосредственно к tooltip`у. Хотя, повторюсь, пример очень красивый.

  • Вообще, всё что реализовано для :hover может некорректно работать для тача. Попробуйте плагин tooltip.js.
    2) Не совсем понятно, что в имеете в виду под «три примера в одном»?
    3) Любые
    Мой пример на iOS проверяла — работает, не могу сказать в чём у вас дело.
    Для вендорных префиксов можете использовать это сервис https://autoprefixer.github.io/ru/.

    • Freeman4D

      Спасибо за источники и компромат на hover!
      Я ищу достойный (в мини-дизайне и без углов) тултип со всеми тремя фичами: текст-определение, картинка-обложка источника этого определения и ссылка на этот источник.
      При этом каждую из этих фич я могу включать/выключать для каждого случая!

      Фактически это будет аналог моего details второго уровня, посвящённый тому же, с теми же элементами, но только не дёргаясь в «Легенду“ из таблицы – чтобы было полное френдли…

      • Тогда вам нужно для элементов, при наведении/клике на которые будет появляться подсказка, задать один общий класс и дополнительные, что-то типа этого:
        span class=»tooltip tooltip-description»
        span class=»tooltip tooltip-image»
        span class=»tooltip tooltip-link»
        Для .tooltip прописать общие для всех случаев свойства, для дополнительных классов — индивидуальные.

        • Freeman4D

          Да, я именно так и задумываю, const- и ind-свойства.
          Спасибо!
          Там, в последней редакции я уточнил 2 вопроса…
          Гляньте, пжлст!

      • 1) 10.2.1
        не js hover и css hover, а js click и css hover, хотя на самом деле так не бывает и вам всё придётся делать со скриптом, что-то типа этого:

        $('element').on('click hover', function () {
            код функции
        });

        js не работает с :before и :after, так как они фактически не существуют в DOM
        2) нет

  • Может вам попросить у руководства небольшой ноут на виндоуз, хоть бэушный? Планшет для разработки не подходит — максимум тестить.

  • Отлично, а то я всё за вас переживала, как вы с планшетом развлекаетесь 😉 Вообще, я не поклонник эпплоидной продукции, ретина — хорошо, но не более. Легкая техника есть и других производителей.
    Насчёт инструментария — рекомендовать то особо нечего — правой кнопкой мыши по элементу — просмотреть код элемента. На Хабре есть хорошая инструкция — https://habrahabr.ru/company/mailru/blog/268519/, https://habrahabr.ru/company/mailru/blog/268777/, https://habrahabr.ru/company/mailru/blog/275425/, может пригодится.

  • Бил Гейтс

    Добрый вечер, подскажите пожалуйста. К чему относится data-tooltip в разметке?
    Спецификацию заодно где можно посмотреть по поводу данного вопроса?

    • Здравствуйте. data-tooltip — пользовательский атрибут данных, его значение генерится свойством content. Конечно, вы можете напрямую прописать это значение a:before{ content: «600Кб»;, но так нагляднее. Кратко вы можете прочитать здесь https://goo.gl/qVxd3W.
      Насчёт переходов — если не указано конкретное свойство, анимируется то свойство, для которого меняется значение свойства при наведении например. Причём это свойство должно быть анимируемым.

      • Бил Гейтс

        Благодарю за помощь!
        Кстати, позвольте замечание, на странице: https://html5book.ru/css-position/ После таблицы с описанием значений свойств float, есть смысловая ошибка в описании: «Но если совокупная ширина всех столбцов окажется меньше доступного места, то последний элемент спустится вниз.» Я думаю, что все-таки больше доступного места на странице…

        • )) Спасибо! В очередной раз приятно видеть вчитывающихся пользователей сайта 😉