Всем привет. Ищу способ сделать так что бы при наведении мышкой на слово появлялась всплывающая подсказка с небольшим текстом и картинкой, а при клике был переход на страницу в википедии.
Сразу скажу - с HTML работаю впервые, совсем ничего не знаю, поэтому если это кажется вам очевидным, будьте добры, сдержите презрение и поделитесь своей мудростью)
Пока пробовал вот этот код найденый в интернете:
[data-tooltip] {
position: relative; /* Относительное позиционирование */
}
[data-tooltip]::after {
content: attr(data-tooltip); /* Выводим текст */
position: absolute; /* Абсолютное позиционирование */
width: 300px; /* Ширина подсказки */
left: 0; top: 0; /* Положение подсказки */
background: #3989c9; /* Синий цвет фона */
color: #fff; /* Цвет текста */
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: 2em; /* Положение подсказки */
}
<p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном...">
Наведи сюда курсор.</p>
как вы понимаете забивание ссылки на картинку в data-tooltip не помогло)