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

【问题标题】：CSS for creating a baloon as a hint用于创建气球作为提示的 CSS
【发布时间】：2021-03-05 15:23:27
【问题描述】：

我正在尝试在文本中的单词上方创建一个气球作为提示。气球里面的文字会有一些块布局，所以我需要把这个布局放到一个矩形块中，并相对于感兴趣的单词显示它。我正在尝试为气球的内部定义 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？

【问题讨论】：

标签： css layout css-position

【解决方案1】：

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

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

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

【讨论】：