Looking to create a custom code for a mouse hover option | XM Community
Question

Looking to create a custom code for a mouse hover option

  • 12 August 2019
  • 1 reply
  • 16 views

I am looking to create a custom code that allows for a definition of a word to pop up in a bubble when you hover your mouse over the word. I do not want a new browser window to pop-up, nor am I looking for the word to be clickable. I simply want a small bubble with a definition of a word to appear next to the cursor when you hover the cursor over it. Any insight would be much appreciated! Thanks!!

1 reply

Userlevel 5
Badge +7
Hey Jake,
I did something similar to this using some simple HTML in the Rich Content Editor. Inside a Mulitple Choice question, I have 2 choices, tiered and narrow. Inside the Rich Content Editor, click the Source button (Top row, all the way to the right, looks like file with <> inside). I then have this in my source:

`<u><span title="A tiered or high performance network is one that groups providers in the network together based on quality, cost, and/or the efficiency of the care they deliver. These networks encourage patients to visit preferred doctors by either restricting networks to efficient providers, or by having different co-payments or coinsurance for providers in different tiers in the network.">Tiered</span></u>`

The < u > means the text 'Tiered' is underlined, which let's my survey responders know they can hover over it, but you can do that outside of source with less hassle. The <span></span> is creating an html span object, which I'm linking an article to. Whatever you wish to appear as a 'bubble' when hovered over should be placed between the quotes after title=. See attachment for how the finished product looks when I hover over Tiered.

Disclaimer, I believe this is supported by HTML 4.0 and up, but that's not to say you may not run into a browser that gives you trouble. Just a heads up. Article explaining more on the subject: link to HTML title tag.

!

Leave a Reply