Inserting a tooltip on a key word

[With acknowledgement and thanks for this content to Marion Sadoux, Language Centre]


Q. How can I create a tooltip (mouseover explanation) on a key word or phrase?

A. A tooltip is a very useful function to use if you wish to provide optional information such as the translation or an explanation of a word that students may or may not know, or provide instructions in the target language with an easy way for language learners to check the meaning.

For example:

Tell us of an experience, real or imagined, when cacography can lead to amusing misunderstandings

As the viewer moves their mouse over the word "cacography" above in green, a box will appear with its definition, or further explanation.

To do this in a Canvas page, first type in your text. Then invoke the HTML editor for your page by clicking </> on the right bottom side of the text editor window 

1.  Find the required word or expression to which you wish to add an explanation, and before it insert:

<span title="write the explanation you want to give here"> 

2.  After the word or expression , insert:

</span>

3. Click </> to exit the HTML editor 

4. Save the page

It's a good idea to draw attention to the existence of tooltips in your content by explaining to students that if they place their mouse or cursor above such words, an explanatory box will appear.