Interactive Glossary Tool

[CarlosPrieto]

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. https://www.youtube.com/watch?v=0CELkADsyTE&ab_channel=RMITStudios

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

Thank you

[kmeeusen · Accepted solution]

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="https://resources.instructure.com/api/v1$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

Example

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,

Kelley

[DavidLee2]

It doesn't work.

[AgataOleksiak]

Is it possible to implement the same solution as RMIT? I was trying to follow on their PDF https://www.rmit.edu.au/content/dam/rmit/documents/staff-site/Learning_and_Teaching/Learning-and-Tea... , but it hasn't worked for me. Does something additional need to be activated? Thank you

[Margokw]

@AgataOleksiak , the RMIT example you show is done with custom CSS scripts that RMIT has hosted on their Canvas instance. Without knowing that custom CSS and having the ability to add it to your own Canvas instance (which you would need to be at least a sub-account admin), you would have to reverse-engineer the CSS to be able to do this. Sorry to burst your bubble!