How do I add hover over/mouse over text on a text field?

[+islandfinders]

Racking my brains playing with HTML with no luck.   I've added hover over text to images before, but now I want to add hover over text on a word that's situated in the middle of a cache description/sentence (not an image, not a link, not underlined - just a plain text word).  Does anybody know if this is doable with the editor that we have?  Thanks!

[+Hügh]

I'm not sure if it's possible through the WYSIWYG editor, but, it should be doable through the HTML editor by wrapping the word/phrase in a <span> and setting its title property. 

 

<span title="Title text">Text</span>

Edited June 5, 2021 by Hügh

[+islandfinders]

Hi Hugh, hope you're doing well.  I tried that before, and just tried it again... nope.  Get the word but no hover words. 

[+Hügh]

4 minutes ago, islandfinders said:

Hi Hugh, hope you're doing well.  I tried that before, and just tried it again... nope.  Get the word but no hover words. 

 

Hm. If you view-source the cache page, does the "title" property appear? It could be that it's getting sanitized out because the "title" property is not usually used with <span>s.

Edited June 5, 2021 by Hügh

[+islandfinders]

Code seems unchanged after saving - <span title="Title text">Text</span>

[+Hügh]

Just did a quick test; it is getting sanitized out, despite what the editor suggests. 

 

The editor:

 

 

The actual cache page:

 

 

Workaround (off the top of my head) would be to put your text in an image, and then set the title of the image. 

Edited June 5, 2021 by Hügh

[+islandfinders]

Yeah I tried that but it didn't look very good.  I'll have to re-think this.  Thanks for the help.  Hopefully the world gets back to normal soon, we'd love to get across the water to do some caching over there - last time we got over there was right before the craziness started. 

Edited June 5, 2021 by islandfinders

[+Hügh]

Nevermind, found a hack!

 

<img title="Title text." alt="Hover over me!">

 

Just use an img, but don't specify the src property. This causes the alt text to render instead! It'll appear like this when you roll your mouse over it.

 

 

This is, of course, very browser-dependent. Some might display the "broken image" icon. Works on Firefox, though!

 

PS. Looking forward to you islanders coming to get GC8Z3Z6.

Edited June 5, 2021 by Hügh

[+islandfinders]

I'd tried that and it showed the icon... but after trying other browsers the results were all different.  Hmmmm.

 

Thanks for pointing out GC8Z3Z6 - we hadn't seen that one yet - we haven't spent much time in the last year updating our Vancouver list - it's added now though.  And we do qualify - only 1 in Waddington!