On my browser, I find the default pop-up text on hover is small and set as white on black - hover over the TG Logo for a second or two.
I also do not like that the hover is a hunt-the-thimble process - there is no cue to let you know there is some information sitting in a pop-up if you don't know where to look.
In HTML, if you have an <abbr> tag with a title attribute, the abbreviated text is dotted underlined and the hover usually reveals the fuller definition.
I wanted to use this approach and colour my pop-up text into the bargain for any text with a title attribute.
The Approach
- Highlight your text.
- Use Web Animation > Selected object > Show pop-up text (Title): add your hover text.
- Include the following CSS in the Website Code (Head):
Code:
<style>
[title] {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: green;
text-decoration-thickness: 5px;
text-decoration-skip-ink: auto;
position: relative;
}
[title]:hover:after {
content: attr(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>
I 'll leave you to experiment with sizes, position, opacity and colours.
It works best with Text Areas. It doesn't for images.
Do note: the original title still appears after a short time.
You will need some JavaScript to stop this.
Acorn
Bookmarks