Question

我有一个css工具提示，它是通过悬停在链接上触发的，然后工具提示文本从隐藏在链接文本中的span元素中填充。

但是我现在需要在弹出窗口中有其他html元素，所以理想情况下我想从另一个div（小提琴中的note1）加载工具提示内容，这是否可以单独使用css？

<--css-->
.ktooltip {
position: relative;
display: inline-block;
}

.ktooltip .ktooltiptext {
visibility: hidden;
background: #fff;
width: 150px;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
top: -5px;
left: 105%;
border:2px solid grey;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.ktooltip:hover .ktooltiptext {
visibility: visible;
}

<p>Here is some text with a note here
<sup class="ref">
    <a href="#note1" id="note1" class="ktooltip">Tooltip
        <span class="ktooltiptext">Current Tooltip text</span>
    </a>
</sup>
that continues on here too.
</p>

<div id="note1" class="ktooltip2"><p>wannabe <b>tooltip</b> with a<a 
href="link">link</a></p></div>

Answer 1

从HTML5开始，你可以在一个锚点中使用块元素，即div，所以不用再担心没有正确验证，所以只需用你的{{1}替换你的span }。

如果您的div包含链接/锚点，则需要将它们包装起来（嵌套链接无效）并使div成为兄弟姐妹，这里使用现有的div完成

注意，为了能够实际点击工具提示中的链接，我将其左侧位置更改为99％，因此当将鼠标悬停在工具提示本身时它不会消失。

ref

.ref {
  position: relative;
}
.ktooltip {
  display: inline-block;
}
.ref .ktooltip2 {
  visibility: hidden;
  background: #fff;
  width: 150px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  top: -5px;
  left: 99%;
  border: 2px solid grey;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.ref:hover .ktooltip2 {
  visibility: visible;
}

来自另一个div的Css工具提示内容

1 个答案: