i know it works the way you suggested i have it working here http://oymyo.com/ultrawiki/doku.php?id=touchscreen_acronyms & it even makes the already defined abbr's mobile compatible
to do it in this example i just put the code into the page.txt but you could just put this where ever you want it (tpl_header)?
<html>
<style>
abbr[title] {
position: relative;
/* ensure consistent styling across browsers */
text-decoration: underline dotted;
}
abbr[title]:hover::after,
abbr[title]:focus::after {
content: attr(title);
/* position tooltip like the native one */
position: absolute;
left: 0;
bottom: -30px;
width: auto;
white-space: nowrap;
/* style tooltip */
background-color: #1e1e1e;
color: #fff;
border-radius: 3px;
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
font-size: 14px;
padding: 3px 5px;
}
/* Other stuff unrelated to this */
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Oxygen-Sans,Ubuntu,Cantarell,sans-serif;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
</style>
<abbr title="Cascading Style Sheets" tabindex="0">CSS</abbr>
</html>
Zello