Css tooltip content from another div

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 a<a 
href="link">link</a></p></div>

you want to show the tooltip on the "tooltip" link when you hover over the "link" link? if not can you clarify exactly what you're wanting to hover, and where you want a tooltip to display? — Michael Coker
That is not possible without script since the #note1 element is neither a child nor sibling to the element with the hover. Why do you need to move it outside the existing markup? — Ason
I want the content in div note1 to pop up when i hover over 'Tooltip' rather than the content in the span element like it currently does. I want to move it outside of the link text because I need full html formatting which should not really go into a href element. Hope thats clear. — Paul M
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 contain a link, you need to wrap them both (nested links is not valid) and make the div a sibling — Ason
Anyway, it can be outside the anchor, but inside the sup, so it is a sibling — vals

Ason Ason · Accepted Answer · 2017-05-31T17:15:59

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

Css tooltip content from another div

1 Answers