Add Tooltips to Images and Text

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:

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

Try it out below

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 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 before your text and after your text

Example:

Here is some text with a tooltip.

Try it out below

Here is some text with a tooltip.

For extra credit

Get fancy with cursor styles

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

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

Find more posts tagged with

Admin

Comments

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!

unknown

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 Smiley Happy

unknown

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.

Robert

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.

Robert

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 class="selector token">span[title]</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="property token">border-bottom</SPAN><SPAN class="punctuation token">:</SPAN> 1px dashed grey<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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:

TOOLTIP TEXT GOES HERE

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