How do I add a "hover over for definition"?

[justucr]

I'd like to add the ability to hover over a word and then display the definition to the word, like the example found here: CSS Tooltip

I tried out the coding on a sample page within Canvas, and it does not work. Any tips?

[kblack]

Hi  @justucr ​ - Canvas publishes an HTML/CSS "whitelist" that is available here to help you figure out which HTML/CSS tags will work:  https://s3.amazonaws.com/tr-learncanvas/docs/Canvas_HTML_Whitelist.pdf.  Alas, the Tooltip is not among them.  You might want to consider joining the Instructional Designers Group and posting your question there to see if anyone has some interesting work-arounds to your question.  In fact, I've just now shared your post with that group.  (Hopefully successfully!)

[ramseyd]

The <a class="ui-tooltip" title="tool tip text goes here"> portion of the code only displays up to 4 or 5 words so the mouse over a specific word to give a a lengthy definition does not work.

[kmeeusen]

Hi  @ramseyd ‌

I use this snippet, and I have inserted half a page of text in the text box, with paragraph breaks and images...........

<span style="font-size: 14pt;"><strong><span title="Text Tooltip">Here is some text with a tooltip.</span>

• The yellow highlighted text is the content of the tooltip (abbreviated for the code snippet), and
• The peach highlighted text is the text to which the tooltip is applied.

What I do when I want to include more information, including links, images etc. into a tool tip is to compose the tip using RCE, switch to HTML and cut the code for that tip, then insert the code into the html snippect.

I hope  this helps,

Kelley

[GideonWilliams]

Hi Kelley, I've clearly not got the knack as I cannot get the picture inside the tooltip - might you care to share a bit more of the html as a hint?

Thanks

[Stefanie · Accepted solution]

 @justucr , this code works for me:

<a class="ui-tooltip" title="tool tip text goes here"><span style="cursor: help;">Text that you want to show the tooltip when hovered over.</span></a>

[rosemary_saul · Accepted solution]

This tooltip is mouse-dependent. It isn't accessible to people who use screen readers or use a keyboard only (and not a mouse).

[chofer]

Hi there,  @justucr ...

I have a couple other solutions that you might want to look at as well.  This first one is very similar to the one that stefaniesanders mentions.  The difference is that when you hover over the text, it doesn't display a little icon with a "?".  Here's that code:

<p><span title="Your mouseover text here"><strong>Your regular text here</strong></span></p>‍‍

This next idea actually display a button on your page (where you can customize the text you want to display on the button), and then when the button is pushed, you get a lightbox effect where the text appears center on the screen, and students click the "X" to exit out of it.  Kinda neat.  Here's that code:

<div id="dialog_for_link1" class="enhanceable_content dialog">Bacon ipsum dolor amet pancetta cow...</div>
<p><a id="link1" class="Button Button" style="width: 20%;" title="This is the button description when you roll your mouse over it." href="#dialog_for_link1">Click to Learn More</a></p>‍‍

You can change the percentage width for the button (currently at 20% .... or even use a number of pixels), and you can even change the color of the button by replacing the second "Button" word in line 2 where it says class="Button Button"...just keep the first "Button" and replace the second one with one of these:

(Example for green --> class="Button Button--success")

Light Gray (Default) -- Button
Blue -- Button--primary
Dark Gray -- Button--secondary
Green -- Button--success
Dark Yellow -- Button--warning
Red -- Button--danger

Good luck!

[rosemary_saul]

Your second option is good because, unlike any of the earlier suggestions, it's accessible to users of screen readers and keyboard-only users.

[janine_levy1]

Chris, could I use this with an image? As the button or/and as the pop up.