AI CSS Animations

CSS Tooltips

30 pure CSS tooltips that appear on hover and keyboard focus: fade, scale, slide and bounce entrances, arrows on every side, rich previews and icon hints. No JavaScript and no positioning library.

Top Tooltip With Arrow

The standard tooltip: a dark bubble above the button with a small arrow, fading in as it rises into place. The arrow is a rotated square half tucked under the bubble.

top · arrow · minimal · tailwind

Bottom Tooltip With Arrow

A light tooltip that drops in below an icon button, with a white fill, a hairline border and an arrow that keeps the outline. The arrow is a square with only two borders.

bottom · arrow · icon · minimal

Left Tooltip With Arrow

A tinted label that slides out to the left of a round action button while the plus icon turns. The arrow is the classic CSS border triangle, colored to match the label.

side · arrow · icon

Right Tooltip With Arrow

An accent tooltip that springs out to the right of an icon button, scaling up from the tip of its arrow. transform-origin sits on the arrow point, so it grows out of the button.

side · arrow · icon · animated

Bounce In Tooltip

The bell rings and a tooltip bounces up out of it, squashing as it lands. One keyframe animation plays each time it opens, with the scale anchored at the arrow.

top · arrow · icon · animated · playful

3D Flip Tooltip

A gradient tooltip that swings down from a hinge under the button, like a flap folding forward in 3D. A perspective() inside the transform keeps the depth local to the tooltip.

bottom · arrow · animated

Blur In Tooltip

The tooltip comes into focus: it starts large and blurred and settles sharp above the button, like a camera pulling focus. Animates filter: blur() together with a scale.

top · arrow · animated

Morphing Pill Tooltip

A dot pops up from the button and stretches sideways into a pill, then the label fades in. The stretch is an animated clip-path inset, so the text never squashes.

top · icon · animated

Word by Word Tooltip

The bubble opens and its words rise out of a blur one after another. Each word is a span with an --i index that sets its transition delay, so any sentence staggers.

top · animated

Tooltip With Delay

Waits half a second before showing, so passing the cursor over the button never flashes it, and hides at once. A thin bar under the button fills while you wait.

top · arrow · animated · minimal

Swinging Tag Tooltip

A paper tag drops on a string below a badge and swings to rest like a pendulum. The swing animates the rotate property around a transform-origin at the top of the string.

bottom · animated · playful

Rich Tooltip With Title

A dark card under a Pro badge with a title, a short explanation and a footnote line. Use it when one sentence is not enough. The card has a fixed width so the text wraps cleanly.

bottom · rich · arrow

Keyboard Shortcut Tooltip

An icon button tooltip that shows its keyboard shortcut as keycaps, and the keys press down one after the other as it opens. Uses real kbd elements with an --i stagger.

top · arrow · icon · animated

Info Icon Tooltip

A small info icon beside a form label that opens a wrapping help text to its right. Only the icon triggers it: the label ignores the pointer, the icon opts back in.

side · arrow · icon · minimal · tailwind

Tooltip for Truncated Text

A file chip cut off with an ellipsis that reveals the full name on hover, wiping out from the left edge. Align it to the start and move the arrow with the --arrow property.

top · arrow · minimal · animated

Definition Tooltip on Underlined Text

A dotted term inside a sentence that opens a dictionary card with the word, its type and a short definition. The dotted line turns solid, drawing across as the card rises.

top · rich · arrow

User Profile Card Tooltip

Hover an avatar and a profile card slides out beside it: photo, name, role and a live status dot. The pieces stagger in with --i delays, and the dot keeps a slow ping going.

side · rich · arrow · animated

Link Preview Tooltip With Image

A link that drops a preview card with a thumbnail, title, summary and URL. The picture settles from a slow zoom as it opens. The thumbnail here is drawn in CSS, so swap in your img.

bottom · rich · animated

Copy to Clipboard Tooltip

A command chip whose tooltip says Copy, then flips to a filled Copied with a check when you press the button. A long transition-delay on the way back holds the message after release.

top · arrow · icon · animated

Form Error Tooltip on Input

A red error tooltip under an email field that shakes once as it opens, and turns into an accent Looks good note once the address is valid. It reads :invalid, so it needs no script.

bottom · arrow · icon · animated

Onboarding Hotspot Tooltip

A pulsing beacon that opens a product tour card to its left: step count, title, one line of help and progress dots. The rings are two pseudo-elements pinging out of step with each other.

side · rich · arrow · animated

Emoji Reaction Tooltip

Hover a reaction chip to see who reacted: the emoji pops out large with a wiggle above the names. The chip's own emoji hops at the same moment, so the two read as one gesture.

top · arrow · animated · playful

Typing Indicator Tooltip

A chat bubble grows out of an assistant button, shows three bouncing typing dots, then widens to reveal its message. The widening is a clip-path inset, so the text never reflows.

top · icon · animated · playful

Tooltip With Progress Bar

A storage chip whose tooltip fills a usage bar while the percentage counts up beside it. The number is a registered integer property shown with counter(), so bar and digits stay in step.

bottom · rich · animated

Animated Gradient Border Tooltip

A dark tooltip framed by a conic gradient that keeps spinning while it is open, with a soft glow of the same colors behind it. The angle is an @property, so the gradient itself rotates.

top · icon · animated

Sliding Toolbar Tooltip

One tooltip for a whole toolbar: it glides under whichever button you hover while its label rolls to the new name. :has() sets an --x index per button, and the labels are a clipped strip.

bottom · arrow · icon · animated

Comic Speech Bubble Tooltip

A comic-book speech bubble with a thick outline, a hard offset shadow and a hand-drawn tail that pops out beside a chunky help button. The tail is a tiny inline SVG that covers the outline.

side · arrow · playful · animated

Tooltip on Disabled Button

Explains why a button is disabled with a checklist of what is missing, and the lock gives a shake. Disabled buttons ignore the pointer and focus, so a focusable wrapper holds the hover.

top · rich · arrow · icon

Glassmorphism Tooltip

A frosted glass tooltip over a video thumbnail: it blurs and brightens the colors behind it with backdrop-filter while the picture zooms in a touch. Glass needs something colorful behind it.

top · icon · animated

Bar Chart Tooltip

A weekly bar chart that shows each day's value in a tooltip above the bar you hover while the other bars dim. With no bar hovered, the highlighted day keeps its tooltip, using :has().

top · arrow · minimal · animated

How to use these tooltips

Open any tooltip, copy the HTML and CSS, and swap in your own trigger and text. The tooltip is a child of the trigger's wrapper, so it positions itself with position: absolute and needs no JavaScript. It appears on :hover and on :focus-within, so keyboard users get it too.

The tooltip text is real text: link it to its trigger with aria-describedby (the snippets do) so screen readers announce it. Keep tooltips short, and never hide essential information in one, since touch screens have no hover.

To change the color, set --tip-color; to change the size, set --tip-size. Every snippet ships with a prefers-reduced-motion rule that shows and hides the tooltip without motion.

Frequently asked questions

How do I make a tooltip with only CSS?

Wrap the trigger and the tooltip in one element with position: relative, place the tooltip with position: absolute, hide it with opacity: 0, and reveal it on :hover and :focus-within.

How do I add an arrow to a CSS tooltip?

Draw a small square with a ::before pseudo-element, rotate it 45 degrees and tuck it half under the tooltip's edge, or use a CSS triangle made of borders. Each entry above shows the arrow for its side.

How do I animate a tooltip?

Transition opacity together with a small transform (translate or scale from the trigger side). Keep it under 200ms so it feels responsive.

Are CSS tooltips accessible?

They can be: show them on focus as well as hover, connect them with aria-describedby, give them role="tooltip", and let Escape or moving away dismiss them.

Can I use the title attribute instead?

The native title tooltip can't be styled, appears after a delay and never shows on keyboard focus or touch. A CSS tooltip fixes all three.