How To Create A Pure Css Tooltip With Html Content For Inline Elements

TL;DR - See Adam's answer (accepted) or Update #5 in my question for the current solution. My question shows my journey getting to that solution in a rather long but explanato

Solution 1:

Note that W3C says :

Defining term: If the dfn element has a title attribute, then the exact value of that attribute is the term being defined.

Accordingly, you can have a simple solution where you put the term being defined inside the title attribute, and the definition inside

dfn::before {content: attr(title);padding: 001em;}      
dfnbutton {display: none; position: absolute}
dfn:hoverbutton, dfn:focusbutton {display: block;}

<p>An
     <dfntitle="onomasticon"tabindex="0"><buttondisabled><p>Another word for <strong>thesaurus</strong></p><p><imgsrc="http://i.imgur.com/G0bl4k7.png" /></p></button></dfn> is not a dinosaur.
</p>

I do not find any tag that can replace here the button element which seems to be the only one working here.

So we have to add the disabled attribute to the button element to disable its button behavior (focus) and set the tabindex on the dfn element to enable arrow navigation.

Solution 2:

As already established in the comments, the easiest way to do this is by simply replacing the p tags with something else. This requires the least amount of workaround, and thus the approach least likely to break.

The quickest is simply replacing the opening p tag with two br tags, and the closing with an empty string. That way you'll get a visible empty line between the two text blocks, similar to what a paragraph break would normally give you. Most of the time this is enough to give the illusion of a paragraph break.

Another solution is, as you've found, to replace them with span-tags and style these to behave exactly like a normal P-tag. This requires a bit more code and work, but has the benefit of behaving, well... Exactly like the paragraphs on your site, creating a perfect illusion of there actually being a paragraph break there. This is the method I'd use if the paragraphs have been styled in an unusual manner, so a simple empty line would not be sufficient to create the illusion. For example when the first line is indented, special styling for the first character or so forth.

In your case, I think a simple double br would suffice. Seeing as you only have a .5em bottom margin on paragraphs.

Edit, added: In light of your comment to my answer, I have one more idea. That is to create a hidden div, and store the comment in this one. Giving it an ID that corresponds to a rel attribute of the dfn tag. Then, using CSS and JS, style the DIV as a tooltip upon hover. Will require a bit more work, but it will allow you to preserve all formatting and tags without issues. For those who don't support the necessary features, you could use a trimmed down version inside the title tag. Then use the same JS to suppress it when showing the "enhanced" tooltip.

But yeah, you're most certainly looking at using JS here. Unless you can make do with the CSS3 adjacent sibling selector

Solution 3:

I used the object tag. It makes more sense to me because you include the info in your text.

dfn {
  position: relative;
  display: inline-block;
}
dfn > .dfn-tooltip {
  display: none;
}
dfn:hover > .dfn-tooltip,
.dfn-tooltip:hover {
  display: block;
  position: absolute;
  top: calc(1em + 4px);
  max-width: auto;
  background: #ccc;
  padding: .5em;
  border: none;
}
.dfn-tooltipspan {
  max-width: 12em;
  float: left;
}
.dfn-tooltipimg {
  max-width: 12em;
  float: left;
  clear: both;
}

<p>An <dfn>onomasticon
  <objectclass="dfn-tooltip"><p>Another word for <strong>thesaurus</strong></p><p><imgsrc="http://i.imgur.com/G0bl4k7.png" /></p></object></dfn> is not a dinosaur.
</p>

Solution 4:

Another solution worth looking into would be to use pure css, in combination with just the element. Forget about the title, or add it plain.

If you can afford to generate and use inline css, and inject it into the head before the output gets served, then how about:

The <abbr id="abbr_1" title="Fox is an animal">fox</abbr>. Another <abbr id="abbr_2">word</abbr>

abbr
{
   display: none;
   position: absolute;
   z-index: 1; //probably not required, but I hope the title won't show up above it.... I guess it won't.
}
abbr:hover{display: block;}
#abbr_1:before{
   content: '<p>Fox is a <i class="">beautiful</i> \'animal\'</p>'
}
...etc

Just don't forget escaping the single quotes ;)