How to use HTML in a CSS-only tooltip - html

Question

I have a CSS-only tooltip that uses a special element attribute to provide the content:
<li class="privTooltip" data-tooltip="My tooltip text">
Which is then handled in CSS:
<style>
[data-tooltip]:after {
content: attr(data-tooltip);
...styling...
}
</style>
But this only supports raw text. If I try to provide any HTML tags, like data-tooltip="<b>Granted through role paths</b>...more stuff", they aren't interpreted:
Text decoration, maybe a simple HTML table, etc.. would make these a lot nicer. I know I can write a DOM-based tooltip that does just about anything, but I'd like to know if it's possible with this lighter-weight pseudo-element CSS-only method.

Answer 1

This solution doesn't use your exact method, but it is CSS-only, which it sounds like is the important part for your use-case. You could try something like this, which allows you to style the tooltip's content with CSS.
EDIT: here's a live version of this in CodePen
HTML
<div class="tooltip">
<!-- put the content you want to hover over here -->
<img style="width: 40px; padding: 16px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/1200px-Infobox_info_icon.svg.png">
<span class="tooltiptext">
<!-- put the tooltip here -->
<strong>Title 1:</strong> Lorem ipsum.<br><br>
<strong>Title 2:</strong> Lorem ipsum.<br><br>
<strong>Title 3:</strong> Lorem ipsum.<br><br>
<strong>Title 4:</strong> Lorem ipsum.
</span>
</div>
CSS
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #fff;
color: #000;
text-align: left;
border-radius: 4px;
border: 1px solid #d0d0d0;
padding: 8px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}