Here is where I now am with it removing the title attribute and placing its contents into both a data-title and an alt attribute, the latter is as an assist towards Accessibility.
I decided that images and other constructs were best left as-is.
My original purpose was to compile a set of website-specific phrases that could be searched against. I am comfortable with what I've made.
Website Code (Head):
Code:
<style>
span[data-title] {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: green;
text-decoration-thickness: 5px;
text-decoration-skip-ink: auto;
position: relative;
}
span[data-title]:hover:after {
content: attr(data-title);
position: absolute;
top: -120%;
left: 0;
color: red;
background-color: yellow;
border: 2px solid blue;
border-radius: 16px;
padding: 2px;
opacity: 0.9;
font-size: 18px;
}
</style>
Website Code (Body):
Code:
<script>
var ttl = document.querySelectorAll('span[title]');
for (i=0;i<ttl.length;i++) {
x=ttl[i].getAttribute('title');
ttl[i].setAttribute('data-title', x);
ttl[i].setAttribute('alt', x);
ttl[i].removeAttribute('title');
}
</script>
The pop-up text is added to a word of phrase in Text mode and not to a complete Text object.
Here is a crude demonstration: JS+CSS - Formatting Title Attributes.xar
Acorn
Bookmarks