用于创建气球作为提示的CSS

Question

我正在尝试创建一个气球作为文本中单词顶部的提示。气球内的文本将有一些块布局，因此我需要将此布局放入一个矩形块中，并相对于感兴趣的单词显示它。我正在尝试为气球的内部定义CSS样式，但到目前为止还不起作用。

以下是文本的一个示例：

<p>Lorem ipsum dolor sit <span class="needs_hint">amet<span class="baloon">hint</span></span>, consectetur adipiscing elit.</p>

单词"amet“是我需要提示的单词，我用一个内联span包装它。提示所需的人员被提取到一个嵌套的span中。

在应用下面的CSS之后，我有一个提示浮在单词"amet“的顶部，这是预期和期望的：

.needs_hint {
    position: relative;
    display: inline-block;
}

.baloon {
    width: 200px;
    position: absolute;
    bottom: 125%;
    left: -50%;
    margin-left: -60px;
    border-width: 1px;
    border-style: solid;
}

现在我需要将布局更复杂的文本添加到气球中。我正在用包含<div>的更复杂的html替换“提示”这个词

<p>Lorem ipsum dolor sit <span class="needs_hint">amet<span class="baloon">inline hint<div class="hint">inline-block hint</div></span></span>, consectetur adipiscing elit.</p>

我正在为下面这行<div>定义CSS：

.hint {
    position: relative;
    display: inline-block;
}

然而，这将提取气球内部的“内联提示”，但将“内联块提示”部分保留在文本内。什么样的CSS可以让我显示一些带有div、表格等的块html？

Answer 1

我在这里找到了一个特别的解决方案：How to create a pure CSS tooltip with HTML content for inline elements。

内部的<span>必须替换为<button>，因为这是唯一允许包含块元素的内联元素。

这个解决方案对我来说是非常不寻常和令人惊讶的，因为<button>具有非常不同的语义，所以欢迎其他解决方案。我也想知道使用按钮标签的理由。