Add Tooltips to Images and Text

[awilliams]

I had seen this in Any way to annotate a Page in Canvas?​ where  @Chris_Hofer ​ and stefaniesanders​ explained how to use this to "annotate a page" in Canvas, but forgot about it until this morning when it came up again in the office. Here is a quick how-to for adding tooltips in a Canvas page.

Definition of tooltip

Add a tooltip to an image

1. Add your image like normal. How do I embed images from Flickr Creative Commons?​ or How do I embed images from Canvas into the Rich Content Editor?

2. Change to HTML editor. How do I edit content in the HTML view in the Rich Content Editor?

3. Add title="Text you want to display in the tooltip" somewhere in the image tag.

Example:

<img title="Folded Oval" src="https://farm3.static.flickr.com/2880/9274820253_3050c8b16a.jpg" alt="Test fold: Oval" width="219" height="282" />

Try it out below

<img title="Folded Oval" src="https://farm3.static.flickr.com/2880/9274820253_3050c8b16a.jpg" alt="Test fold: Oval" width="219" height="282" />

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

Add a tooltip 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?

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

Example:

<span title="Text Tooltip">Here is some text with a tooltip.</span>

Try it out below

<span title="Text Tooltip">Here is some text with a tooltip.</span>

For extra credit

Get fancy with cursor styles

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

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

auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait