0

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

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

1 ответ 1

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>

3
  • Приветствую Сработало на отлично, теперь остался вот такой вопрос - сейчас при добавлении двух таких блоков по очереди они на странице выстраиваются по вертикали, а мне нужно что бы они шли по очереди, как обычный текст. Я правда совсем не силен в верстке, извините за дурацкие вопросы) 20 июл 2022 в 11:20
  • еще одно заметил - при наведении мышки картинку перекрывет другой текст на который можно навестись, то есть если весь текст будет с возможностью наведения то получится что вся картинка будет перекрываться текстом. Как это пофиксить? 20 июл 2022 в 11:33
  • Не совсем понятно... Задайте новый вопрос и опишите, что не получается.
    – NoSkill
    22 июл 2022 в 23:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.