Interactive Glossary Tool

Jump to solution
Community Member

Hello Community

I'm looking for a glossary tool that allows students to see definitions as tooltips.

Something similar to the one used in the RMIT.

Do you know an alternative for this or how can I implement this same tool?


Thank you

Labels (1)
1 Solution
Coach Emeritus

Hi @CarlosPrieto 

You can do this with some very easy HTML snippets.  Below is a page describing how to do this from my Do Not Fear the Code course for faculty............

Add a Tooltip to Image

Hover over the image below to display the tool tip.




  Code Snippet

<img title="GIF of panda playing a banjo - ROCK ON Dude!" src="$IMS-CC-FILEBASE$/Banjo%20panda.gif" alt="Banjo panda.gif" data-api-endpoint="$IMS-CC-FILEBASE$/Banjo%20panda.gif?canvas_download=1" data-api-returntype="File" /></p>


How to Do This

1. Add your image like normal. How do I embed images from Flickr Creative Commons? (Links to an external site.) or How do I embed images from Canvas into the Rich Content Editor? (Links to an external site.)

2. Change to HTML editor. How do I edit content in the HTML view in the Rich Content Editor? (Links to an external site.)

3. Add title="Text you want to display in the tooltip" somewhere in the image tag (Yellow highlighted text in snippet above).


But what about text you say? Sure you can do that too, you just have to use a <span> tag.

Add a Tool Tip to Text

1. Type your text into the Rich Content Editor

2. Change to HTML editor. How do I edit content in the HTML view in the Rich Content Editor? (Links to an external site.)

3. Put <span title="Text you want to display in the tooltip"> before your text and </span> after your text



Here is some text with a tooltip.


Code Snippet for Above Example

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


For extra credit

Get fancy with cursor styles. These can help draw attention to text with a tooltip.

 1. <span style="cursor:auto">auto</span><br>
2. <span style="cursor:crosshair">crosshair</span><br>
3. <span style="cursor:default">default</span><br>
4. <span style="cursor:e-resize">e-resize</span><br>
5. <span style="cursor:help">help</span><br>
6. <span style="cursor:move">move</span><br>
7. <span style="cursor:n-resize">n-resize</span><br>
8. <span style="cursor:ne-resize">ne-resize</span><br>
9. <span style="cursor:nw-resize">nw-resize</span><br>
10. <span style="cursor:pointer">pointer</span><br>
11. <span style="cursor:progress">progress</span><br>
12. <span style="cursor:s-resize">s-resize</span><br>
13. <span style="cursor:se-resize">se-resize</span><br>
14. <span style="cursor:sw-resize">sw-resize</span><br>
15. <span style="cursor:text">text</span><br>
16. <span style="cursor:w-resize">w-resize</span><br>
17. <span style="cursor:wait">wait</span><br>

Move your mouse over the words below to see a preview of cursor style


This Community has a version of this same course called "CanvasHacks Demo Course", if you are interested in learning more, go to CanvasHacks Demo Course blog for a join link.


Good luck,


View solution in original post