從另一個div的Css工具提示內容

Question

我有一個css工具提示，它通過懸停在鏈接上觸發，工具提示文本然後從隱藏在鏈接文本中的span元素填充。

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

但是我現在需要有彈出窗口內的其他HTML元素所以最好我想加載從另一個DIV（在小提琴注1）提示內容，這可能與孤獨的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"> 
 
    \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>

要顯示「工具提示」鏈接上的提示，當鼠標懸停在「鏈接」的鏈接