Contents
Intro
Tooltips! Aargh, I still don't know how I feel about them.
I understand they are useful, but part of me feels like there must be a better way to get that information across.
Nevertheless, we're probably going to have to implement them at some point, so let's dive in.
Title
You can achieve a tooltip on any HTML element very simply by setting the attribute title
.
That's it! No NPM installs, no tricks!
The rest is browser magic.
<span title="Yay, a tooltip!">ℹ️</span>
Styling
Let's get this out of the way. You can't style how the title attribute displays, it's up to the browsers.
But if styling a tooltip is a MUST. I'd argue you are probably best off not using a tooltip and getting the information across in a different way.
Example
Shut up and show me the code.
10 Internet points to those who get the movie reference in the tooltip!
Summary
In summary, you can use what browsers give you to create a tooltip.
It will be accessible for all users as its semantic HTML.
There will be nothing faster as it is a HTML attribute.
Happy building!
What are your thoughts on tooltips? Love them or hate?
Top comments (14)
As much as I love
title
it seems like over the years it has gotten a lot of neglect. 24a11y.com/2017/the-trials-and-tri... This article goes into more details about it. I use something like this to make a small, stylable keyboard and mouse user accessible tooltip.It’s a little more involved, but now has a wider accessibility support both mouse and keyboard users.
A bit more involved, but still browser native! It's an interesting solution!
Thank you for the comment
Please excuse me if this is a bit off topic, but I think this is the perfect post to ask for some advice about tooltips.
I love how tooltips allow us to show our users a little help text about UI elements, and I've added tooltips to most of my web app elements. But after using the app for a little while they become a bit annoying.
I think maybe I could keep a track of how many times a tooltip is shown to the user, and disable it after N times. This N value could be small for frequently used elements and a bit higher for elements that are rarely used. This count could be kept in local storage or maybe saved in the server's user profile.
Has anyone already faced and solved this issue? Any advice or best practice on how to handle it? Thanks!
Hey Koas,
I wonder if perhaps a step-by-step tutorial would be a good replacement?
Then users could get the guide if they need and go back to it at any time and advanced users could skip it.
I'm sure there would a service or library to help implement.
Yes, a tutorial would definitely be the way to go!
If you find any good tools for implementing one, I'd love to hear about it :D
Hey, I came across this today which might be useful for you 😊
boardme.io/
Looks great, thanks!! 🙂
As of December 2020, most mobile browser vendors have still not implemented support for
title
(presumably because there is no way to “hover” with a touchscreen). For this reason, thetitle
attribute has only very limited use cases, namely for non-essential information that doesn't need to be displayed to users of mobile devices.Usually, tooltips should be available to mobile users as well as desktop users. If anything, tooltips may be used more frequently on mobile devices, due to limited screen real estate. The interaction for displaying them will be slightly different (usually a touch rather than a hover, both of which usefully trigger a
mouseenter
event), but they’ll still remain viewable.If you’re building exclusively for desktop or doing rapid prototyping, you might want to use
title
for simplicity. Otherwise, it’s almost never the correct choice.Yeah, this is where my mixed feels come into it for tooltips.
Getting them on hover on desktop makes sense to me as a user, but on mobile triggering one by tapping on it feels a weird interaction.
I'd rather use something else. To quote a UX conference I went to. You can put as many signs on a door as you want but a user is going to interact with it based on the handle provided. uxdesign.cc/intro-to-ux-the-norman...
I've recently started using tooltips (from the Vue Element library) over title attributes since the tooltip appears instantly and the title tip takes a few milliseconds to show. It's a very small difference but I think it makes a much better user experience.
About those Internet points... May the quote be from Hans Gruber in Die Hard? :)
How big is the tooltips library out of interest? bundlephobia.com/
I'm always trying to minimise the size of the bundle if I can.
I'm still in mixed feelings about tooltips, mainly inspired by this I heard at a UX conference.
bundlephobia.com/result?p=element-...
It's huge, 175kb gzipped, but it's not just the tooltips, it's a whole UI toolkit for web apps.
And nailed the internet points 😂