主页 / 问题 / 1431435
Accepted
Алхимик
Asked:2022-07-20 18:00:20 +0000 UTC2022-07-20 18:00:20 +0000 UTC

HTML - 图片工具提示

  • 772

大家好。我正在寻找一种方法，以便当您将鼠标悬停在一个单词上时，会出现一个带有小文本和图片的工具提示，并且当您单击时，会转换到维基百科上的页面。

我马上说我是第一次使用 HTML，我什么都不懂，所以如果这对你来说很明显，请抑制你的轻蔑并分享你的智慧）

在尝试在 Internet 上找到此代码时：

[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>

如您所知，插入数据工具提示中图像的链接没有帮助）

html вёрстка

1 个回答

  1. Best Answer

    在您的情况下（复杂的工具提示），最好不要使用伪元素before和after. 此外，它们在语义上并不是为此而设计的。最好将工具提示内容放在单独的元素中。此外，为了使鼠标指向正常工作，最好不要移动提示本身，因为如果它从光标下方浮动，它将立即关闭。最好用另一个元素包裹工具提示并增加它的 padding 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>

    • 1

相关问题