Самый просто способ для создания всплывающей подсказки, это добавить элементу атрибут title, но вид такой подсказки зависит от браузера, появляется с небольшой задержкой и не может быть стилизован.
<p title="Нативная подсказка">Наведи на меня</p>Наведи на меня
Для создания кастомной всплывающей подсказки, напишем элементу в html пользовательский data атрибут data-tooltip с текстом, который мы хотим выводить, а в css добавим псевдоэлемент ::after, которому передадим значение из добавленного атрибута.
<p data-tooltip="Текст подсказки">Наведи на меня</p>[data-tooltip]::after {
content: attr(data-tooltip);
}Получаем такой результат: текст из атрибута вывелся на страницу.
Наведи на меня
Теперь скроем подсказку, сделаем чтобы она появлялась при наведении, немного стилизуем её и готово