21 Tailwind CSS tooltips and hover cards for developer toolbars and form fields, data tables and status dashboards, avatar mentions and org charts, and reference cards for glossaries, recipes, EXIF, and the periodic table — spanning pill tooltips with CSS arrows, staggered profile reveals, rarity-tinted item cards, and side-anchored hint popovers. Scoped under .ttp-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 21 Tailwind tooltips. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
For product diagrams and exploded views: four pulsing red discs pin a wireframe drawing, and hovering or focusing one reveals a numbered callout with part name, prose and a monospaced spec grid. The port's win is peer — the CSS original's .hot:hover + .leader + .note chain broke the moment anything was inserted between the two elements; peer-hover: compiles to a general sibling combinator and does not.
A toolbar tooltip that wears its shortcut as little extruded keycaps which depress on a loop while the pill is shown. The port's win is the intent gate: group-hover:delay-400 states the reveal delay on the pill itself, beside the group-focus-visible:delay-0 that makes the keyboard path instant — in CSS those two live inside one positional three-value transition-delay list nobody can read.
The typed-signature popover a code editor shows on hover: badge, namespace path, multi-line signature, prose, a parameter table and a footer shortcut. The port's interesting cost is whitespace-pre — the CSS version fights inheritance with two resets, and Tailwind makes both of them visible on the elements that need them.
A sidenote for longform reading: the source phrase grows an underline left-to-right on hover, and a deckle-edged paper card drops on a hairline tether holding an italic note and a monospaced citation. The port's signature move is the underline — bg-[size:0_1px] hover:bg-[size:100%_1px], a background-size transition that no text-decoration can animate.
The hover card behind every @mention: a roster row reveals a 320px panel whose parts arrive in sequence — hero glow, then portrait, then name, tagline and stats — so the card unfolds instead of flicking on. The port's win is the stagger: group-hover:delay-50 and group-hover:delay-[180ms] sit on the children that wait, not in a pile of nth-child rules.
A rarity-tinted loot tooltip: common through legendary, each tier driving its own border, item name, stat bar fill and pulsing aura. The port's move is [--rpg:#fbbf24] — one arbitrary property on the slot, read by border-[var(--rpg)], text-[var(--rpg)] and bg-[var(--rpg)] on four descendants, which is exactly what the CSS original did and is far easier to see here.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Dotted-underlined terms in a paragraph that open a full dictionary card — part of speech, headword, IPA, etymology, italic definition, a usage quotation and synonym pills. The port is a relocation: every declaration has a utility, so the stylesheet shrinks to tokens and the card's five stacked sections become visible as five class lists.
A status list where each service dot pulses with its state and hovering a row opens a side card: 30-day uptime bars, three live metrics and the last incident. The port's lesson is the opposite of clever — 120 uptime bars is where @apply beats repeating twelve utilities, and the per-bar colour and height stay inline because they are data.
Initials avatars that lift on hover and pop a compact profile: gradient hero band, ringed portrait, role, presence, bio, three stats and two actions. The port's honest finding is that per-person gradients are data, so they stay inline as bg-linear-to-br from-[#6028a0] to-[#9060d0] while the card shell — identical four times — moves into one @apply class.
A shortcut list where each row opens a full reference card to its left: big keycaps, plain-English description, three when-to-use lines and related chords as pills. The port's shape is two @apply keycap sizes plus one card shell — the same object at two scales, stated once each.
A quarterly metrics table where every number is a hover target: the popover names the metric, restates the value large, shows the change versus prior quarter and breaks the total into three segments. Twelve cells of identical structure make this the clearest @apply case in the collection — the shell is one class, the numbers are markup.
Coloured topic pills that lift on hover and open a topic card: monogram tile, article count, description, a popularity bar with trend, related tags and three top articles. Eight pills in eight brand colours make the port's rule explicit — the per-topic palette is inline data, the card is one @apply shell.
A Solari-flap departures board in amber on charcoal: hover a flight row and a detail card drops with airline, route diagram, aircraft grid and gate timing. The port's neat trick is that the six-column grid track list is declared once as an arbitrary value and reused by the header and every row.
A cookbook page where each ingredient carries a dotted underline and opens a side card with nutrition, substitutions and a sourcing note. Warm paper palette, Georgia for the recipe, Inter inside the card — the port's value is that the two typographic registers are now visible per element instead of split across sixteen rules.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Orion rendered as inline SVG with six labelled stars: hover one and a card gives Bayer designation, spectral class, distance, magnitude and a five-star brightness scale. The port's practical move is flip-side placement — one modifier class puts the card left instead of right for the two stars near the chart's edge.
Ten element tiles colour-coded by category, each opening a card with symbol, category badge, atomic data, electron configuration and a discovery line. Six categories × three colour roles is exactly the case for a per-tile variable: [--el:#3ca03c] paints tile, border and badge from one place.
A contact-sheet grid where hovering a frame shows its EXIF: body, lens, date, then aperture, shutter and ISO in three columns, with focal length, white balance and location beneath. Eight identical cards, eight different gradients — the port's split of shell into @apply and image into inline values, one more time.
A four-node org tree where each box opens a person card: hero band, ringed portrait, department pill, reports / org size / tenure, and contact plus timezone. The port's placement rule is declarative — nodes left of centre open right, nodes right of centre open left, one modifier class each.
A seven-stop company timeline whose events alternate above and below the track, each opening a card with quarter, headline, badge, narrative and one impact figure. The alternation is the port's interesting case: odd:flex-col-reverse and odd:*:bottom-[calc(100%+10px)] keep an nth-child rule as a variant instead of a separate selector.
The workhorse: unlabeled toolbar icons that name themselves on hover in a small dark pill with a CSS-triangle tail. This is the whole collection in miniature — one group, one after: arrow built from border widths, one 140ms transition, and nothing else.
Small help circles beside form labels that reveal a one-line rule to the right, so the hint never covers the field above. The port's correction is semantic: the hint is wired to the INPUT with aria-describedby, which means a screen reader reads the rule while typing — not only when something is hovered.
FAQ
Frequently asked questions
How does the hover-to-reveal actually work with just Tailwind utility classes?
Every tooltip is a parent-child pair. The trigger and popover share a common ancestor that carries the group class, the popover sits absolute next to it in a relative wrapper, and it stays hidden with opacity-0 plus pointer-events-none. On group-hover:opacity-100 and group-focus-within:opacity-100 it fades in, usually paired with a scale-95 to group-hover:scale-100 and a transition so it grows rather than pops. Demo 20's icon toolbar is the cleanest example of this shape. Nothing here needs custom JavaScript — the reveal is pure CSS state driven off :hover and :focus-within, which is why you can paste a demo into any Tailwind project and it works without wiring up a listener.
Why does my tooltip get clipped or cut off at the edge of a scrolling container?
Because these popovers are positioned with absolute inside a relative parent, they live in the normal stacking flow, not a portal. If any ancestor sets overflow-hidden, overflow-auto, or overflow-x-clip — common on cards, data tables like demo 11, and the photo grid in demo 17 — the part of the popover that spills past that box gets clipped. Two fixes: remove the clipping overflow on the nearest ancestor, or flip the popover to the side that has room using directional utilities (anchor it left with right-full instead of left-0, as demo 10 and demo 21 do). Raising z-index does not help here; z-index never lets content escape an overflow clip. Reserve z-50 only for the separate problem of one tooltip sitting behind a neighbouring card.
Are these tooltips accessible to keyboard and screen reader users?
The reveal itself is keyboard-friendly because it keys off group-focus-within as well as hover, so tabbing to the trigger opens the same panel — verify the trigger is genuinely focusable (a real <button> or an anchor, not a bare <div>). Beyond that you must add semantics the utilities can't: give the trigger aria-describedby pointing at the popover's id for a short hint like demo 20 or 21, and mark decorative icons with aria-hidden. The dense hover cards — the profile card in demo 05, the org node in demo 18 — are really disclosures, not tooltips; a screen reader user benefits more from aria-expanded on the trigger there. Also confirm your popover text meets contrast; the amber-on-charcoal departures board in demo 13 looks great but needs checking at small sizes.
The tooltip flickers or disappears when I move my mouse toward it — how do I fix that?
Flicker happens when there is a physical gap between the trigger and the popover. Once the popover is offset with something like mt-2 or ml-3, the cursor crosses un-hovered space on its way over, the :hover state drops, and the panel vanishes mid-travel. The reliable fix is to keep the hover region continuous: put the offset as padding on the popover wrapper rather than margin, so the gap is still inside the hover target, or anchor the popover flush and push only its inner content. Because the reveal is driven by group-hover on a shared ancestor, another option is to make that ancestor span both elements so the hover never leaves it. The arrow pill in demo 20 avoids the problem by sitting close with its CSS triangle bridging the seam.
How is the little arrow or triangle on the tooltip drawn?
It's a pure-CSS triangle, no image or SVG. The classic trick is a zero-size box with a thick border where three sides are border-transparent and only one side is coloured, which renders as a pointing wedge; demo 20 builds its pill arrow this way. In Tailwind you'll see it as an absolutely positioned child with border-8, three transparent border-color utilities, and one solid, nudged with -bottom-2 or left-1/2 -translate-x-1/2 to straddle the pill edge. An alternative some demos use is a small square rotated 45 degrees with rotate-45 tucked half behind the panel so only a corner shows. Match the arrow's fill to the popover background, and remember the arrow inherits the same overflow clipping caveat — if the wrapper hides overflow, the arrow gets shaved off.
Should I use these for rich hover cards, or are they only for short label tooltips?
Both, but they are two different patterns wearing similar clothes. A true tooltip — demo 20's icon labels, demo 21's field hints — is a few words that name or clarify the trigger; keep it short, non-interactive, and reachable on focus. The larger panels — the profile card in demo 05, the service status card in demo 08, the recipe side card in demo 14 — are hover cards or disclosures that hold links, bars, and structured data. Don't cram interactive controls into a hover-only tooltip: a user can't move their cursor onto a link inside something that closes when hover leaves the trigger. For anything the user needs to click into, prefer a click-to-open panel with real focus management. Use the hover reveal for glanceable, read-only supplementary detail, which is exactly what most of these demos are designed for.
Why doesn't the tooltip open at all on mobile or touch devices?
Touch screens have no persistent hover state, so a group-hover reveal simply never fires — the first tap is treated as the activating tap, not a hover, and there's nothing to sustain it. That's fine for demos where the tooltip is supplementary (the EXIF card in demo 17, the constellation data in demo 15): the underlying content still makes sense without it. It's a problem when the tooltip carries information the user genuinely needs. On touch, make the trigger a focusable control so tapping fires :focus-within and holds the panel open until they tap elsewhere, or promote the pattern to an explicit click-to-toggle disclosure. Never hide load-bearing content — a price, a required form rule like demo 21 — behind hover alone, because a large share of visitors will never see it.
How do I position the popover above, below, or beside the trigger without it jumping around?
Positioning is all in the absolute child's anchor utilities relative to its relative parent. Above: bottom-full mb-2. Below: top-full mt-2. To the right, as the field hint in demo 21 does: left-full ml-3. To the left, like the reference cards in demo 10: right-full mr-3. To centre a top/bottom popover over the trigger, add left-1/2 -translate-x-1/2; for a side one, top-1/2 -translate-y-1/2. The jump usually comes from mixing a scale transition with a translate centring on the same element — put the entrance scale and its origin-bottom or origin-top on an inner wrapper, and keep the translate centring on the outer positioned element, so the two transforms don't fight. Pick one fixed side per trigger; the timeline in demo 19 alternates sides deliberately, but each card's side is fixed, not computed at hover.
