DEV Community

loading...
Cover image for How HTML gives us tooltips for free!

How HTML gives us tooltips for free!

jordanfinners profile image Jordan Finneran Originally published at jordanfinners.dev Updated on ・1 min read

Contents

  1. Intro
  2. Title
  3. Example
  4. 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>
Enter fullscreen mode Exit fullscreen mode

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?

Discussion (14)

pic
Editor guide
Collapse
this_frankie profile image
Frankie

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>
Enter fullscreen mode Exit fullscreen mode
[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;
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
jordanfinners profile image
Jordan Finneran Author

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

Collapse
koas profile image
Koas

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!

Collapse
jordanfinners profile image
Jordan Finneran Author

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.

Collapse
koas profile image
Koas

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

Thread Thread
jordanfinners profile image
Jordan Finneran Author

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

Thread Thread
jordanfinners profile image
Jordan Finneran Author

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

Thread Thread
koas profile image
Koas

Looks great, thanks!! 🙂

Collapse
lionelrowe profile image
lionel-rowe • 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.

Collapse
jordanfinners profile image
Jordan Finneran Author

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

Collapse
koas profile image
Koas

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

Collapse
jordanfinners profile image
Jordan Finneran Author

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.

Collapse
koas profile image
Koas

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.

Collapse
jordanfinners profile image
Jordan Finneran Author

And nailed the internet points 😂