Hover and focus tips with arrows, no positioning library.
A pure-CSS tooltip is a positioned pseudo-element with an arrow made from a rotated square. It cannot flip when it hits the viewport edge, which is exactly the line where you should reach for a real popover library instead — but for a tip on an icon button in the middle of a toolbar, the CSS version is a tenth of the weight.
Tooltip that fades in above the trigger with a blue arrow.
Popover that slides in from the right with an ocean accent edge.
Tooltip that scales in below the trigger with a blue outline.
Frosted tooltip with an ocean hairline and a real arrow, driven by data-attr — appears on focus as well as hover.
Profile preview popover with avatar, bio and stat, easing open from its top-left corner in blue.
Mention chip that opens an ocean-edged profile card on hover or keyboard focus.
Hint showing its own key binding in real `<kbd>` elements, opening on hover and focus so the shortcut is discoverable from the keyboard too.
Product-tour callout anchored to a pinging hotspot, with step counter and advance button — the shape a first-run walkthrough actually needs.
Top and bottom variants sharing one rule set, each arrow tinted to the gradient stop nearest it so the tail never mismatches the bubble.
Inline confirmation with cancel and proceed, opening on focus as well as hover so a keyboard user can reach the buttons inside it.
Chart hover state as one unit — dashed guide, marker dot and a value card pinned above the same x position, so the three never drift apart.
Tray that floats above its trigger on hover or focus, each option popping on an overshoot so the row feels physical rather than a menu.
Dotted term in running text that opens a definition card rather than a one-line tip, with the headword repeated and a category line so it reads as an entry, not a hint.
Share sheet pairing a row of destination tiles with the raw link and its copy button, since the link is what most people were reaching for anyway.
Deferred-commit filter menu — selections stage inside the panel behind reset and apply, with the active count carried on the trigger so it survives closing.
Comic-book speech bubble with a hard offset shadow floating over a chunky amber icon button.
Range slider whose thumb carries a sky-blue value bubble that lifts as the thumb grows on hover.
A fuchsia swatch button with an attached picker popover showing a saturation area, hue rail and hex readout.
A truncated filename that reveals its full text in a teal tooltip when hovered.
A ⋮ overflow button with its dropdown menu open, rows highlighting violet and a destructive item set apart.
Round emerald plus button whose label slides out sideways from behind it like a drawer on hover.
Command token whose tooltip reads "click to copy" on hover and swaps for a green confirmation while the press is held.
Bell button with an unread count badge that opens a right-aligned panel of notifications, unread rows marked by a blue dot.
Floating format bubble that pops above a highlighted phrase with bold, italic, underline, link and quote controls.
Showing 24 of 29. Search the rest →
Backdrops, sheets, drawers and dialog transitions.
Small confirmations: checks, likes, copies, ripples and nudges.
Alerts, banners and stacked toasts with timed dismissal.
Disclosure patterns built on details, radios and checkboxes.
Rings, stacks, statuses, frames and hover reveals.
Status pills, counters, chips and label variants.