CSS-only Inline "Tooltip" With HTML Content Inside (eg. images) 可能吗？

Question

Stack Overflow 上有很多工具提示解决方案，即。当用户将鼠标悬停在其他文本上时显示某些文本或 HTML 的方式。但是，我似乎找不到这样的：

纯HTML+CSS
允许内联工具提示（例如，不需要 <div> 或其他块元素）
允许 HTML 工具提示内容（可能带有 display:block）

这些要求来自于想要在文本段落内提供内联术语的定义，我希望这些定义能够包含块显示 HTML 内容（例如段落和图像).

我发现的大多数 CSS-only 解决方案似乎都是通过将“工具提示”定义嵌套在悬停目标的 HTML 中来工作的。但是，如果您希望术语是内联的，但它的定义是块的，那是不可能的，因为您必须将块内容嵌套在一个内联标签中。

我可以使用任何其他方法让我在段落内将单词或短语作为“悬停目标”，然后在发生这种情况时显示 HTML 悬停定义......没有 Javascript ？

Answer 1

如果允许更改实际文本的标记以使用 div + 合适的 CSS 替换内联元素（p 可能最需要这个），您可以在 div 中插入工具提示内容是内联块。

这意味着任何块内容都可以保留在工具提示中。

这是一个简单的例子：

.inline {
  display:inline-block;
  position: relative;
}
.inline .content {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  z-index: 99999;
  border-style: solid;
  background-color: white;
}
.inline:hover .content {
  display: block;
}

<div>I am not hoverable.
    <div class="inline">But I am hoverable.&nbsp; 
      <div class="content">I am tooltip content and I've got an image in me... 
        <img src="https://picsum.photos/200"/>
        <div>...and another div</div>
      </div>
    </div>I am not hoverable.
</div>

当然，还有如何确保工具提示在所有类型的设备上可见以及将其放置在何处的问题，但这是另一个问题，也是普通跨度类型工具提示也必须解决的问题。

CSS-only Inline "Tooltip" With HTML Content Inside (eg. images) 可能吗？

Is a CSS-only Inline "Tooltip" With HTML Content Inside (eg. images) Possible?

html

css

tooltip