How HTML gives us tooltips for free!

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.

Contents

  1. Intro
  2. Title
  3. Example
  4. Summary

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?

These are webmentions powered by webmention.io