It’s Tool(tip) Time! How to Make Custom Tooltips in CSS and Javascript

Ashley Hellyer
Sep 4, 2018 · 2 min read

What is a tooltip?

Tooltips are features that help users understand unfamiliar objects on a website that aren’t explicitly described with a label. They can help simplify a websites design and provide information to the user on a “need to know” basis.

Tooltips are generally displayed when a user hovers over an icon or an object. Once the user moves their mouse off the icon the tooltip disappears.

Tooltip example from dribble.com

When should you use one?

A good tooltip offers supplemental information only. They work well to describe rarely used features on a site, or to provide context for users accessing a site for the first time. If there has to be a lot of user interaction with a tooltip then that content is likely better suited for a modal or an expanding content section because as soon as a user moves off of the tooltip it will disappear.

Tooltip Example from Github.com

Three tips for good user experience:

  1. Have appropriate placement: the tooltip shouldn’t interfere or cover what the user is trying to accomplish.
  2. Be consistent: keep tooltips short and sweet with limited intractability.
  3. Be predictable: if you provide a tooltip for one icon in a set of icons it’s best to include a tooltip for all of them.

How to Make your own Custom Tooltips

You can add a title attribute to any html element and that text will show up on hover of that element:

Default styling for the html “title” attribute

Use CSS to Customize

You can customize your tooltips with css the way you would with any other element, but it’s important to include aria attributes on both the tooltip itself and the content you are describing so that screen readers will associate the two. Use “aria-describedby” on the content that has the tooltip, and an id on the tooltip itself. Make your aria-describedby attribute equal to the id you give your tooltip.

Custom CSS Styling for a tooltip

Use Javascript to customize

If you want to add styled tooltips to dynamically added content, there are a couple of simple libraries out there that add aria attributes automatically. Two great ones are Tippy.js and VanA11y.

Tippy.js tooltip library

For more resources check out:

Happy tooltipping!

Ashley Hellyer

Written by

Web developer + master collaborator

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade