It’s Tool(tip) Time! How to Make Custom Tooltips in CSS and Javascript
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.

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.

Three tips for good user experience:
- Have appropriate placement: the tooltip shouldn’t interfere or cover what the user is trying to accomplish.
- Be consistent: keep tooltips short and sweet with limited intractability.
- 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:
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.
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.

For more resources check out:
Happy tooltipping!
