他のdivのCSSヒントのコンテンツ

Question

リンク上にカーソルを置くことによってトリガーされるCSSのヒントがあり、リンクテキストに隠されたspan要素からヒントが読み込まれます。私は今、ポップアップ内の他のHTML要素を持っている必要がありますしかし

フィドルhttps://jsfiddle.net/70wxxhne/

ので、理想的に、私は別のdiv（フィドル中注1）から、ツールチップのコンテンツをロードしたいと思い、これだけではCSSで可能ですか？

HTML5のよう

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

、あなたがアンカーの内側、すなわちdiv、ブロック要素を使用することができますに、そう、適切もう検証ので、単にあなたのdivであなたのspanを交換することを得ていないについて心配ありません。

あなた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"> 
 
    \t <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>