CSS -使用~ to标题设置第二个元素的内容

Question

我正在尝试使用CSS和非常少量的JavaScript创建工具提示系统。到目前为止，我已经创建了如下结构：

<div class="tooltip" title="foo"></div>
<div class="tooltip" title="bar"></div>
<span id="tooltip-span"></span>

我创建了几个CSS样式，以便在悬停时显示工具提示的跨度，并根据鼠标位置将工具提示移动到正确的位置。

然而，我在试图使工具提示的内容与正在徘徊的div相对应时遇到了困难。我试过使用以下CSS，但没有结果：

.tooltip:hover ~ #tooltip-span {
    display: inline;
    content: attr(title);
}

是否有任何方法使span元素使用CSS使div标题的内容悬浮在上面？

感谢您的阅读！

Answer 1

用纯CSS，不。content: attr(title)将内容设置为匹配的元素的title属性，在您的示例中是#tooltip-span。

要以您想要的方式完成这项工作，您需要使用Javascript更新<span id="tooltip-span"></span>的title属性。