如何在工具提示数据中显示图像？

Question

我找到了一个示例工具提示 html css，它正是我正在寻找的。但我不想显示文本，而是想显示图像。这是链接。

我们可以在数据工具提示上显示图像还是仅限于文本内容？我尝试了这样的方法，但没有成功。:

<a href="#" class="tooltip-top" data-tooltip="<img src="https://www.w3schools.com/html/pic_trulli.jpg">">Tooltip</a>

Answer 1

codepen 使用悬停时显示的伪元素 (

::after

)，并使用其父元素的

data

属性的文本。

~~不可能在伪元素的内容中显示图像。~~显然可以在伪元素的内容中显示图像，但不是你编写的方式。 HTML 标签的属性内有一个 HTML 标签。 HTML 根本不是这样工作的。您需要在伪元素的 CSS 中使用图像 URL。

content: url(...);

或者您可以使用图像作为伪元素的

background-image

，这需要一些额外的宽度、高度等 CSS 样式。

或：

如果图像 URL 无法在 CSS 中使用，您将必须使用完全不同的方法来构建它，例如

div

容器，其中包含 HTML 中内置的图像，位于每个链接旁边，仅当您将鼠标悬停在相应链接上时才会显示。您可以仅使用 HTML/CSS 或使用 JavaScript 来完成此操作。