Jump to content

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


Followers 0

Recommended Posts

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!

Link to comment
Posted (edited)

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 by Hügh
Link to comment
Posted (edited)
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 by Hügh
Link to comment
Posted (edited)

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

 

The editor:

 

Screenshot_20210605-155846.thumb.png.8c8e6bf2ee15783207a5567189dffbb9.png

 

The actual cache page:

 

1423073567_Screenshot_20210605-1558362.thumb.png.32322ba3e5fde89237552e5813c8c4a5.png

 

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 by Hügh
Link to comment
Posted (edited)

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 by islandfinders
  • Love 1
Link to comment
Posted (edited)

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.

 

TMP__exp.png.e5d6f10141ab6a63ed4d3c3169797580.png

 

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 by Hügh
Link to comment

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!

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Followers 0
×
×
  • Create New...