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

[Stef_retired]

Totally bookmarked, awilliams​, and thanks for the shout-out!

[Chris_Hofer]

Great stuff, awilliams​!  Boy, you could really freak people out by changing the cursor appearance over text.  :smileyshocked: :smileyconfused: :smileymischief:

[mpoole]

Thanks awilliams​!  I was thinking this is a great way to add attributions to images I use from internet sources.  I love the idea of having the source information appear when the user hovers over the image.  Thanks!

[kmeeusen]

awilliams​

Thanks for sharing this great hack. Could you add this to our Canvas Hacks Demo course?  And, If you are not already a member, I could certainly add you. Of course, if you don't wish to be a member of that course, my next question would be - Can I add this tip to the course?

[awilliams]

Hey  @kmeeusen ​, I'd be happy to add it or fine with someone else adding it. Shoot me some more info on the Canvas Hacks Demo course and I'll take a look.

[kmeeusen]

Adam

I have added it, thanks for the permission. I gave it full credit as you noted above.

The CanvasHacks Demo course is a classroom created in the Canvas Network by Scott Dennis after several of us in the Instructional Designers group asked for it. We share our HTML and global script hacks there in a format intended for training. I started the ball rolling by adding the content of a similar course I was in the process of building for my own faculty designed for non-coders. CanvasHacks now has well more than 80 participants - some enrolled as students many more enrolled as teachers. If you want to shoot me a private message with your email address, I will happily enroll you, and you can see what we have done to date and add your own great stuff!

[rfeilden]

Just a quick reminder about tooltips and accessibility - they are problematic with things like screenreaders and for users with touchscreens.  You'll want to make sure you have that information in a form that's accessible to all your students

[cmk24]

Is there any way to get tooltips to work in the mobile app?

[Boekenoogen]

Nice job. I need t look at this more to see what can be used in our programs.

[robotcars]

While the information Adam provide's here about the title attribute is accurate, I think it should be used sparingly or not at all in course content.

If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.
Using the HTML title attribute – updated | TPG – Digital Accessibility Solutions 

If you want to try creating tooltips for all users and devices, read Tooltips & Toggletips | Inclusive Design Components

Regarding Alt:

https://a11yproject.com/posts/alt-text/ 

Image Descriptions |  Accessibility Program 

https://www.washington.edu/accessibility/checklist/images/ 

Describe the content of images |  Accessibility 

[awilliams]

I will add, you all should listen to Robert over me! I created this when I was a Canvas admin and a novice tinkerer with HTML. Robert if you think any disclaimers or additional information should be added to the content let me know and I'll be happy to add it.

[robotcars]

Thanks awilliams

I didn't come in to attack the content, I just saw Helpful popups and it linked to this page...

I see that it's an old post (with new replies) and feel that we should start squashing old habits. :smileygrin:

I'm just learning web design in the context of course design, and tripping all over things I feel are problematic for students and some users.

We're trying to evaluate best practices as we start redesigning and improving our courses and guiding teachers to do the same.

We feel a good starting point is focusing on accessibility.

I'm a huge fan of this article by Heydon Pickering, Who Is Inclusive Design For? | HeydonWorks

This, Inclusive Design Principles 

And, https://a11yproject.com/checklist 

are good starts.

We had a tiny debate in the office today around this topic, and while I stated that since not ALL USERS can benefit from the feature, it should probably be avoided. If used, we should probably use a common mark to identify there is an interactive element there. This would at least give users on mobile devices an identifier that they might want to revisit the content on a desktop, but we still exclude screen readers and keyboard only users.

span[title] {
    border-bottom: 1px dashed grey;
}‍‍‍‍‍‍‍‍‍

Otherwise, go all out, and develop something for everyone, but that probably includes JavaScript, Tooltips & Toggletips (previously linked)

All the disclaimers ... just begs ... to find another way.

Just because it looks fun and cool doesn't make it the right tool.

[emily_smith2]

You could always add your tooltip as suggested in the post and underneath in the HTML editor add this:

<p style="display: none;" aria-hidden="false">TOOLTIP TEXT GOES HERE</p>

A screen reader will read that but it is not visible on the page.