Formatting pop-up text (Title)

[Acorn]

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):

<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

[Acorn]

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):

<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):

<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