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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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