Узнайте, как создать всплывающую подсказку на чистом HTML и CSS

HTML подсказка - это блок с дополнительной информацией, который появляется при наведении курсора мыши на определенный элемент веб-страницы. Сегодня мы создадим собственную всплывающую подсказку с помощью HTML и CSS :

Посмотреть демо-версию | Скачать исходный код

Мы сможем использовать CSS-подсказки для большинства элементов, таких как ссылки, теги, стилизованный текст и т.д. Нам нужно будет применить к элементу несколько классов и добавить атрибут data- с текстом всплывающей подсказки.

Настройка документа

Нам нужно создать HTML-документ и задать исходную разметку:

Я добавил ссылку на Normalize.css , которая помогает сбросить все стили браузера по умолчанию, и гарантирует, что каждый элемент будет выглядеть одинаково во всех браузерах. В отличие от стандартного сброса CSS Normalize.css не удаляет все стили по умолчанию, так что вам не нужно будет переписывать стиль каждого элемента с нуля.

Я создал div с классом container , в который мы поместим основные примеры всплывающих подсказок HTML . Вот стили для body и класса .container :

Я отцентрировал div контейнера, присвоив для margin-left и margin-right значения auto . Также добавил несколько стилей для раздела body , чтобы он выглядел лучше.

Я решил добавить для фона небольшой светлый CSS-градиент . Если браузер не поддерживает CSS-градиенты ( это касается в основном IE 8 и 9 ), цвет фона будет переключен обратно на синий по умолчанию ( цвет фона раздела body ).

Я буду использовать HTML подсказки при наведении с тегами анкоров, но вы можете назначить классы других встроенных элементов, таких как strong tag или span . Ниже приводится содержимое div контейнера:

Маркированный список содержит четыре элемента с тегами анкоров. Я изменил стили элементов списка, чтобы они не содержали маркеры списка, а отображались как inline-block . Это позволит нам добавить отступы между ними:

Давайте подробнее рассмотрим тег анкора:

Я назначил для ссылок два класса. Класс tooltip будет отвечать за тело подсказки, а второй - определять ее размещение.

Вы также можете видеть пользовательский атрибут data- , который содержит текст нашей HTML подсказки.

Ниже приведен код класса tooltip :

Сама HTML всплывающая подсказка при наведении - это псевдоэлемент :after , она позиционируется абсолютно. Вот почему необходимо присвоить относительную позицию элементу анкора. Я добавил несколько основных стилей, такие как отступ, рамка, размер шрифта и ширина. Давайте более внимательно рассмотрим свойство content .

Оно содержит attr() - значение, в котором хранятся наши пользовательские data-tooltip , и использующее их, чтобы вывести текст самой подсказки. Вместо data-tooltip вы можете использовать любое другое имя, просто убедитесь, что оно начинается с data- . Больше о данных атрибутов вы можете узнать здесь .

Тело подсказки имеет минимальную ширину 80 пикселей. Если нужно, чтобы содержимое подсказки растягивалось в одну строку, то добавьте для свойства ширины значение max-content , которое в данный момент вынесено в комментарии. Следует отметить, что это экспериментальная функция, поэтому вы должны использовать вендорные префиксы -webkit- и -moz- .

Чтобы задать для HTML подсказки при наведении эффект слайд-анимации, мы используем свойство transition . Обратите внимание на значение .25s , которое указывает задержку перед тем, как подсказка отображается или скрывается. Таким образом, она не будет выводиться, если вы наведете курсор мыши на текст по ошибке, а только при наведении курсора на более продолжительное время. Я также задал непрозрачность 0 и видимость hidden . Мы не можем использовать display: none; , потому что элемент полностью исчезнет, и мы не увидим каких-либо эффектов перехода. Непрозрачность и видимость изменяются при наведении на элемент указателя мыши.

Примечание: Я изменил / удалил часть разметки и стилей в демо-версии на CodePen . Чтобы увидеть окончательный результат, посмотрите демонстрационный пример в конце этой статьи.

Теперь, когда мы реализовали появление / исчезновение HTML всплывающей подсказки при наведении, давайте заставим ее двигаться. Мы уже назначили свойство анимации, и нам осталось задать исходную позицию, откуда она должна появляться, и конечную:

Я решил добавить этот функционал в дополнительные классы. Таким образом, если вы назначите, например, класс .tooltip-left , подсказка будет выводиться слева от текста, если добавите .tooltip-top , подсказка будет выводиться сверху, и т.д.

В этой демо-версии я использую класс .tooltip-right . Вы можете поэкспериментировать и применить различные классы, чтобы задать различные позиции всплывающей подсказки HTML .

Последним элементом всплывающей подсказки является маленький треугольник на одной из сторон блока. Мы создадим его с помощью псевдокласса :before ( псевдокласс :after уже использован для самой подсказки ). Мы назначаем его для наших четырех классов позиции, чтобы для каждой из них треугольник выводился соответственно:

Мы создаем треугольник, задав ширину для рамки, когда сам элемент не имеет ширины или высоты. В этом случае ширина рамки устанавливается в 7 пикселей. Цвет рамки является полностью прозрачным, что очень важно. В следующем фрагменте кода я назначаю цвет для соответствующей стороны рамки, что позволяет задать форму треугольника.

Остальная часть стилей выглядит аналогично тому, что мы делали для тела HTML подсказки при наведении. У нас те же переходы, позиция является абсолютной, непрозрачность устанавливается на 0 и видимость - скрытая:

Чтобы заставить треугольник двигаться таким же образом, как и подсказка, нужно назначить начальную и конечную позиции.

Вы можете поэкспериментировать с классами позиции. Положение треугольника будет меняться соответствующим образом.

Посмотрите окончательную демо-версию, чтобы увидеть нашу всплывающую подсказку в действии.

Посмотреть демо-версию | Скачать исходный код

Этот код поможет вам понять, как сделать подсказку в HTML . Вы можете изменить стили, чтобы они соответствовали дизайну вашего блога, а также можете изменить продолжительность и скорость анимации. Чтобы использовать их, примените к элементу класс tooltip и класс позиции, а также задайте для атрибута data-tooltip свой текст подсказки.