нашёл в сети, протестировал - мне понравилось. плюсом именно данного варианта можно посчитать то, что вывод информации можно сделать на какой-то блок или область. то есть подсказка появляется не просто при наведении на ссылку/картинку, а на какую-то определённую часть страницы. ну и "плавное появление", "красивость" и тому подобное.
оригинальная тема: https://webref.ru/layout/pseudo-class-hover/tooltip
пример:
Наведи сюда курсор. 
как видите подсказка показывается при наведении на область, а не на элемент. и ничему не мешает.
код вывода этого действа:
Код: Выделить всё
<style>
[data-tooltip] {
position: relative; /* Относительное позиционирование */
}
[data-tooltip]::after {
content: attr(data-tooltip); /* Выводим текст */
position: absolute; /* Абсолютное позиционирование */
width: 300px; /* Ширина подсказки */
left: 0; top: 0; /* Положение подсказки */
background: white; /* Белый цвет фона */
border: 1px solid #069; /* Полоса вокруг подсказки */
color: black; /* Цвет текста */
padding: 0.5em; /* Поля вокруг текста */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
pointer-events: none; /* Подсказка */
opacity: 0; /* Подсказка невидима */
transition: 1s; /* Время появления подсказки */
}
[data-tooltip]:hover::after {
opacity: 1; /* Показываем подсказку */
top: 4em; /* Положение подсказки, смещение вниз при появлении */
}
</style>
<p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном...">
Наведи сюда курсор.
</p>
сверху располагается css код оформления и выведения подсказки. сама область выведения задаётся элементом
Код: Выделить всё
<p data-tooltip="подсказка">информация</p>интересная штука, это точно.
для изучения применения можете перейти на сайт автора или скачать html-файл:
Скачать из демо-архива сайта
