Jordan Finneran

Posted on Dec 24, 2020 • Edited on Mar 13, 2021 • Originally published at jordanfinners.dev

How HTML gives us tooltips for free!

#webdev #javascript #html #beginners

Intro
Title
Example
Summary

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)

ginger • Dec 24 '20

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.

<span data-title=“I’m a tool tip look at me!”>
    There is more than meets the eye ;)
    <span class=“visually-hidden”>I’m a tool tip look at me!</span>
</span>

[data-title]::after {
  content: attr(data-title);
  position: absolute;
  /*
   * add other styles you want
   */
}

/* https://piccalil.li/quick-tip/visually-hide-an-element-with-css/ */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

It’s a little more involved, but now has a wider accessibility support both mouse and keyboard users.

Jordan Finneran • Dec 27 '20

A bit more involved, but still browser native! It's an interesting solution!
Thank you for the comment

Koas • Jan 3 '21

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!

Jordan Finneran • Jan 4 '21

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.

Koas • Jan 4 '21

Yes, a tutorial would definitely be the way to go!

Jordan Finneran • Jan 7 '21

If you find any good tools for implementing one, I'd love to hear about it :D

Jordan Finneran • Feb 5 '21

Hey, I came across this today which might be useful for you 😊
boardme.io/

Koas • Feb 5 '21

Looks great, thanks!! 🙂

lionel-rowe • Dec 24 '20 • Edited

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, the title 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.

Jordan Finneran • Dec 27 '20

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...

Koas • Dec 25 '20

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? :)