Всплывающая подсказка при наведении на текст css


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

 

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

 

data атрибут должен начинаться с «data-» и продолжаться уже любым именем. Например, для хранения текста подсказки используем атрибут data-info=»Мой текст подсказки».

 

HTML

Для примера используем список:

 

CSS

При наведении мыши на элемент li отображается псевдоэлемент after с текстом атрибута data-info. Важно в свойстве content указать имя data атрибута.

Результат

Возможно, вам будет интересно: