Бывают случаи, когда нужно сделать простую всплывающую подсказку без подключения различных библиотек, нагружающих страницу. Для этого удобно будет воспользоваться data атрибутами, с помощью которых будем хранить текстовую информацию всплывающей подсказки.
data атрибут должен начинаться с «data-» и продолжаться уже любым именем. Например, для хранения текста подсказки используем атрибут data-info=»Мой текст подсказки».
Для примера используем список:
1 2 3 4 5 |
<ul> <li data-info="Lorem ipsum dolor.">Пункт 1</li> <li data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, qui.">Пункт 2</li> <li data-info="Lorem ipsum.">Пункт 3</li> </ul> |
При наведении мыши на элемент li отображается псевдоэлемент after с текстом атрибута data-info. Важно в свойстве content указать имя data атрибута.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
li { display: inline-block; margin: 0 20px; position: relative; } li:hover::after { content: attr(data-info); position: absolute; width: 200px; padding: 15px 10px; bottom: 117%; left: 50%; margin-left: -100px; border-radius: 7px; background-color: #373849; text-align: center; color: #fff; cursor: default; } |