Всплывающая подсказка при наведении: HTML, CSS

Задача. Необходимо установить всплывающие подсказки для текста или html-элементов.

Решение. Всплывающие подсказки можно сделать несколькими способами: только на HTML и CSS, или же дополнительно использовать JavaScript.

Вариант 1: Всплывающая подсказка на CSS

Код №1: Всплывающие подсказки на чистом CSS через attr() в :before
Это простой пример всплывающей подсказки.

Смысл Кода №1 таков, что назначаем нужному элементу универсальный атрибут data- со значением, которое будет в итоге контентом всплывающей подсказки. После чего в стилях прописываем данные для появления псевдоэлемента ::before нашего элемента. В свойстве content через функцию attr() добавляем вывод значения установленного ранее атрибута data-.

Вариант 2: Всплывающая подсказка на CSS без data-

Может быть такая ситуация что нет возможности прописать data-атрибуты нужным эелементам. В таком случае можно сделать подсказки как в первом варианте, только в свойство content вписывать непосредственно необходимую подсказку. Тут необходимо чтобы была возможность как-то определить нужный элемент. Возможно у него будет id или какие-то другие атрибуты.

Код №2: Всплывающие подсказки на чистом CSS без attr()
Наши услуги:

Услуга один

Услуга два

Услуга три

Плагины Всплывающих подсказок для WordPress

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

WordPress Tooltips (Tomas) — бесплатный плагин подсказок. Также есть возможность загрузить библиотеку ключевых слов, которые будут автоматически форматироваться как с всплывающей подсказкой. Так можно настроить, чтобы подтягивались слова, подсказки которых будут заполняться из Википедии.

WordPress Tooltips Ultimate & Image Hotspot (codemine) — премиум плагин подсказок для WordPress. У него больше возможностей. Можно добавлять подсказку и в ее настройке указывать селектор, к которому она будет привязываться. Т.е. если нет возможности самому отредактировать какой-то элемент и у него есть уникальный id, или другая возможность, которая позволит сослаться на него, то можно подцепить всплывающую подсказку. Также, в подсказки можно добавлять изображения, содавать различные группы стилей и др.

Ссылка на основную публикацию