时间戳

首页 > 解决方案 > 用于创建气球作为提示的 CSS

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

问题描述

我正在尝试在文本中的单词之上创建一个气球作为提示。气球里面的文字会有一些块布局，所以我需要把这个布局放到一个矩形块中，并相对于感兴趣的单词显示它。我正在尝试为气球的内部定义 CSS 样式，但到目前为止这不起作用。

下面是一个文本示例：

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

“amet”这个词是我需要提示的词，我用 inline 包裹它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;
}

现在我需要将具有更复杂布局的文本添加到气球中。我将“提示”一词替换为包含以下内容的更复杂的 html <div>：

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

标签： csslayoutcss-position

解决方案

我在这里找到了解决我的问题的临时解决方案：如何为内联元素创建带有 HTML 内容的纯 CSS 工具提示。

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

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

推荐阅读