Six tooltip patterns written with Tailwind utilities that appear on hover and on keyboard focus: a tip with an arrow, top, right, bottom and left placements, a form help icon, toolbar shortcut hints, a profile hover card and a click-to-open toggletip.
A tooltip shown with group-hover: and group-focus-within:, so it appears for both mouse and keyboard users. The tip is linked to the button with aria-describedby and has an arrow made from a rotated square using before: utilities.
Four buttons with tooltips on the top, right, bottom and left. The only differences between them are the position utilities, which shows how placement is just a matter of anchoring the absolutely positioned tip to a different edge.
A small help button beside a form label that explains the field on hover and focus. The trigger is a real button with an accessible question as its name, which works with keyboards and on touch screens where hover does not exist.
View code
<div class="w-full max-w-xs text-sm">
<div class="mb-1.5 flex items-center gap-2"><label for="twv" class="font-semibold text-slate-700">Tax ID</label>
<span class="group relative"><button type="button" aria-label="What is a tax ID?" aria-describedby="twv-t" class="grid h-5 w-5 place-items-center rounded-full bg-slate-200 font-serif text-xs font-bold text-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600">i</button>
<span role="tooltip" id="twv-t" class="pointer-events-none absolute left-7 top-1/2 z-10 hidden w-56 -translate-y-1/2 rounded-lg bg-slate-900 px-3 py-2 text-xs leading-relaxed text-white group-hover:block group-focus-within:block">Only needed for business orders. You can add it later in settings.</span></span>
</div>
<input id="twv" placeholder="GB123456789" class="w-full rounded-lg border border-slate-300 px-3 py-2.5 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-100">
</div>
04. Tailwind Toolbar Shortcut Tooltips
TailwindToolbar
An icon toolbar whose tooltips show the action and its keyboard shortcut. Each button has an aria-label, the tooltip is decorative and hidden from screen readers to avoid reading the name twice, and kbd elements style the keys.
A rich hover card for a username link that previews an avatar, name and short bio. delay-300 on the visible state stops it flashing when the pointer only passes over, and group-focus-within: makes it available to keyboard users.
A click-to-open info bubble using the HTML popover attribute and popovertarget, styled with Tailwind. The browser handles opening, light dismiss and Escape, and the popover is positioned near the centre of the screen as a safe default.
View code
<div class="flex items-center gap-2 text-[15px] text-slate-900">
<span>Returns accepted within 30 days</span>
<button popovertarget="twpop" aria-label="About returns" class="grid h-6 w-6 place-items-center rounded-full bg-slate-900 text-xs font-bold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">?</button>
<div id="twpop" popover class="w-64 rounded-xl bg-slate-900 p-4 text-[13px] leading-relaxed text-white shadow-xl">Items must be unused and in their original packaging. We email a prepaid label within one working day.</div>
</div>
About these Tailwind Tooltips
group-hover and group-focus-within
Put group relative on a wrapper around the trigger and the tip, then show the tip with group-hover:opacity-100 and group-focus-within:opacity-100, so keyboard users get the same help as mouse users.
Arrows with before:
The small arrow is a rotated square drawn with before: utilities and positioned at the tip's edge. Matching its background to the tooltip makes the two read as one shape.
Link the description
Give the tip role="tooltip" and an id, and point the trigger's aria-describedby at it. In the toolbar demo the tip repeats the button name, so it is hidden with aria-hidden to avoid double reading.
Delays and touch
Use delay-300 on the visible state of larger hover cards to stop flicker, and use the popover attribute for information that people on touch screens need to open with a tap.