Eight tooltip patterns that work with a mouse, a keyboard and a screen reader: a basic tip with an arrow, four placements, a form help icon, a frosted glass tip, toolbar shortcuts, a click-to-open toggletip using the popover attribute, a profile hover card and a quick attr()-based tip.
A tooltip that appears on hover and on keyboard focus, with a small arrow drawn by a rotated square. The tip text is a real element linked with aria-describedby, so screen readers hear it, and it stays visible while the pointer moves onto it.
View code
<span class="tip">
<button aria-describedby="tip1">Export</button>
<span role="tooltip" id="tip1">Download this report as a CSV file</span>
</span>
One tooltip component placed on the top, right, bottom and left of its trigger with a data attribute. Each side has its own arrow direction, and the shared rules live on the base class so adding a placement only takes two short declarations.
View code
<div class="sides">
<button class="t4" data-side="right" aria-describedby="p2">Right<span role="tooltip" id="p2">To the right</span></button>
<button class="t4" data-side="left" aria-describedby="p4">Left<span role="tooltip" id="p4">To the left</span></button>
<button class="t4" data-side="top" aria-describedby="p1">Top<span role="tooltip" id="p1">Above the button</span></button>
<button class="t4" data-side="bottom" aria-describedby="p3">Bottom<span role="tooltip" id="p3">Below the button</span></button>
</div>
The small i icon next to a form label that explains a field. The icon is a real button with an accessible name, so it can be reached with Tab, and the explanation shows on focus as well as hover, which matters on touch screens and for keyboard users.
View code
<div class="fld">
<label for="tax">VAT number</label>
<span class="info">
<button type="button" aria-label="What is a VAT number?" aria-describedby="vat-tip">i</button>
<span role="tooltip" id="vat-tip">Only needed for business orders inside the EU. You can add it later.</span>
</span>
<input id="tax" placeholder="GB123456789">
</div>
A frosted tooltip for colourful or photographic backgrounds. backdrop-filter blurs whatever sits behind it, a hairline white border separates it from the background, and the text stays white on a dark tint so it remains readable.
Icon toolbar buttons with tooltips that show the action name and its keyboard shortcut in kbd elements, like desktop apps. Each icon button has an aria-label, and the tooltip repeats it visually, so sighted mouse users learn the shortcut too.
A click-to-open toggletip built with the HTML popover attribute: no JavaScript, light dismiss when you click elsewhere, and Escape closes it. The button points at the popover with popovertarget, and the browser handles the open state for assistive technology.
View code
<div class="pop-wrap">
<p>Shipping is free over $60 <button class="q" popovertarget="ship-pop" aria-label="About free shipping">?</button></p>
<div id="ship-pop" popover class="pop">Free shipping applies to standard delivery within the country. Express is always charged.</div>
</div>
A larger hover card for usernames that previews the profile with an avatar, a short bio and follower count. It opens after a short delay so it does not flash while the pointer passes over, and it can also be reached with Tab on the link.
View code
<p class="mention">Design by <span class="hc"><a href="#" aria-describedby="hc1">@mira.studio</a>
<span class="card" id="hc1" role="tooltip"><span class="av" aria-hidden="true">M</span><b>Mira Okafor</b><em>Ceramicist and illustrator in Lisbon. 4,200 followers.</em></span></span></p>
The quickest tooltip: the text lives in a data-tip attribute and is shown by ::after with content: attr(data-tip). It is handy for decorative hints in prototypes, but pseudo-element text is not reliably read aloud, so the same text is repeated in aria-label.
View code
<div class="attr">
<a href="#" class="dt" data-tip="Opens in the same tab" aria-label="Pricing, opens in the same tab">Pricing</a>
<a href="#" class="dt" data-tip="Updated weekly" aria-label="Changelog, updated weekly">Changelog</a>
</div>
A tooltip that only appears on hover is invisible to keyboard and touch users. Show it on :focus-visible or :focus-within as well as :hover, and make sure the trigger can receive focus, which means using a button or link rather than a plain span.
Connect the text
Link the tooltip to its trigger with aria-describedby and give it role="tooltip". Screen readers then read the tip after the button's name. Keep tooltips short and never put essential information or links only inside them.
Toggletips for touch
On phones there is no hover, so an information bubble should open on tap. The HTML popover attribute with popovertarget does this without JavaScript and closes on Escape or a click elsewhere.
Avoid flicker
Add a short delay before a large hover card appears, as the profile card does with transition-delay, so it does not flash when the pointer only passes over the link.
Frequently asked questions
Is the title attribute a good tooltip?
Not on its own. It does not appear on focus or touch and has unpredictable timing. Use a real element with aria-describedby.
Can tooltips contain links?
No. If it needs links or buttons, use a popover or a dialog instead.
Do these need JavaScript?
No. All eight are CSS and HTML; the popover demo uses a built-in browser feature.