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

Question

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

小提琴https://jsfiddle.net/70wxxhne/

但是我现在需要在弹出窗口中包含其他 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，因此无需担心无法正确验证，因此只需将您的 span 替换为您的 div。

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

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

.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>Here is some text with a note here
  <sup class="ref">
  	<a href="#note1" id="note1" class="ktooltip">Tooltip</a>
    <div id="note1" class="ktooltip2">
      <p>wannabe <b>tooltip</b> with a<a href="link">link</a></p>
    </div>
  </sup> that continues on here too.
</div>