cancel
Showing results for 
Search instead for 
Did you mean: 
justucr
Community Member

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

Jump to solution

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?

2 Solutions

Accepted Solutions
Stefanie
Community Team
Community Team

 @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>

View solution in original post

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

View solution in original post

0 Kudos
14 Replies
kblack
Community Member

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

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.

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

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
Community Team
Community Team

 @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>

View solution in original post

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

View solution in original post

0 Kudos
chofer
Community Coach
Community Coach

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!

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

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