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

Question

Всем привет. Ищу способ сделать так что бы при наведении мышкой на слово появлялась всплывающая подсказка с небольшим текстом и картинкой, а при клике был переход на страницу в википедии.

Сразу скажу - с 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 не помогло)

Answer 1

В вашем случае (комплексной подсказки) лучше не делать подсказку с помощью псевдо-элементов before и after. Тем более семантически они для этого не предназначены. Лучше вынести контент подсказки в отдельный элемент. Причем, чтобы првильно работало наведение мышки, лучше не перемещать саму посказку, так как если она уплывет из-под курсора, то она немедленно закроется. Лучше обернуть подсказку еще одним элементом и увеличивать ему внутренний отступ padding, таким образом курсор мышки всегда будет находится над подсказкой, даже при ее движении.

.tooltiped {
  position: relative;
}
.tooltiped .tooltip {
  position: absolute;
  left: 0; top: 0;
  visibility: hidden;
  opacity: 0;
  transition: ease 1s;
}
.tooltiped:hover .tooltip {
  padding-top: 2em;
  visibility: visible;
  opacity: 1;
}
.tooltiped .tooltip .tooltip-content {
  max-width: 300px;
  padding: 0.5em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  background: #3989c9;
}
.tooltiped .tooltip .tooltip-content,
.tooltiped .tooltip .tooltip-content a {
  color: #fff;
}

<div class="tooltiped">
  <p>Наведи сюда курсор.</p>
  <div class="tooltip">
    <div class="tooltip-content">
      Всплывающая подсказка сообщает о чём-то многозначном и полезном...
      <a href="http://wikipedia.org">WIKI</a>
      <button>И даже кнопку можно сюда засунуть!</button>
    </div>
  </div>
</div>

БЛОГ НА HUSL

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

Ответы (1 шт):