来自另一个 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>