I successfully implemented hover tooltips in my HTML code using the following method:
HTML (Django templates):
<div class="hint-quest-mark">
?<span class="hint-title" data-title="{{ class_.explanation }}"></span>
</div>
The class_.explanation variable contains a string with line breaks represented by '\n'. However, when rendered in the browser, it displays as follows:
<div class="hint-quest-mark">
?<span class="hint-title" data-title="string 1 string2 string3"></span>
</div>
without the actual line breaks.
To address this issue, I tried using the Django filter linebreaksbr to replace '\n' with the <br> tag. However, the CSS content property attr(data-title) cannot interpret HTML tags and simply displays "string 1<br>string2<br>string3".
CSS:
.hint-title {
display: inline;
position: relative;
}
.hint-quest-mark:hover > .hint-title::after {
display: block;
content: attr(data-title);
position: absolute;
top: -24px;
left: 27px;
z-index: 1;
}
.hint-quest-mark:hover > .hint-title::before {
display: block;
position: absolute;
background: url("pict/hint_left_oblique.png") no-repeat;
content: "";
left: 12px;
top: -12px;
z-index: 2;
}
My question is: How can I include HTML tags in the CSS content, or explore other solutions to create custom hover tooltips with HTML-tagged content?