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

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

Разметка HTML

tooltip-2

Рис. 1 Элементы всплывающей подсказки

Стили CSS

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`у. Хотя, повторюсь, пример очень красивый.