So after writing this post I did a different google search, and came across this stackoverflow post:
It basically says, that you can’t change the tooltip from the title attribute, as it default to the display by the browser in use. Bummer. However, it continues to show some alternate stylings related to the title attribute, or other attributes, which also provides me with a solution for single line attributes.
So if I change my markup to be:
<span data-tip="One liner">test</span>
And add the following CSS:
span[data-tip]:hover::after {
content: ": " attr(data-tip);
position: relative;
}
It allows for this to be displayed:
I would however really love being able to have multiple lines, and potentially in a box related to the <span> element. I tried a few variations using position: absolute, but my attempts have failed so far.
They could possibly fail because in addition to the tooltip, I’m also having this CSS to relocate the <span> element to the right margin:
span[data-tip] {
display: inline-box;
float: right;
}