Css tooltip content from another div - css

Question

I have a css tooltip which is triggered by hovering over a link, the tooltip text is then populated from the span element hidden in the link text.
fiddle https://jsfiddle.net/70wxxhne/
However I now need to have other html elements within the popup so ideally I would like to load the tooltip content from another div (note1 in the fiddle), is this possible with css alone?
<--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 alink</p></div>

Answer 1

As of HTML5, you can use block elements, i.e. div, inside an anchor, so no worries about not getting that validated properly anymore, so simply replace your span with your div.
If your div contains a link/anchor, you need to wrap them both (nested links is not valid) and make the div a sibling, here done with the existing ref
Note, to also be able to actually click on the link in the tooltip, I changed its left position to 99%, so it does not disappear when hovering the tooltip itself.
.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">
Tooltip
<div id="note1" class="ktooltip2">
<p>wannabe <b>tooltip</b> with alink</p>
</div>
</sup> that continues on here too.
</div>