Tooltips — 610 CSS effects

Contextual hints, popovers, callouts, and directional arrows.

Pure CSS with no dependencies or build step. Open any effect for a live preview, source code, and browser editing.

Page 1 of 7

Live preview Tooltips

3D Fold Origami

Tooltip that unfolds in 3D like an origami paper fold.

#hover #transform #border

Live preview Tooltips

3D Cube Spin

Tooltip that spins in 3D like a tumbling cube above the trigger.

#hover #transform #border

Live preview Tooltips

Square Arrow Left

Tooltip with a sharp square-cut arrow pointing right.

#hover #transform

Live preview Tooltips

Snow Winter

Winter-themed tooltip with falling snow pattern decoration.

#hover #gradient #transform

Live preview Tooltips

Chevron Arrow

Tooltip with chevron-style arrow pointing to trigger.

#hover #transform #border

Live preview Tooltips

3D Rotate Y

Tooltip that rotates fully on the Y axis to appear above the trigger.

#hover #transform #border

Live preview Tooltips

Curve Arrow Top

Tooltip with a curved swooping connector above the trigger.

#hover #transform #border

Live preview Tooltips

Calendar Event

Calendar event tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Charcoal Noir

Near-black charcoal tooltip with a film-noir mood.

#hover #transform #shadow

Live preview Tooltips

Circle Mask

Tooltip reveals with a circle mask opening above the trigger.

#hover #transform #border

Live preview Tooltips

Diamond Grow Clip

Diamond-shaped tooltip that grows from a point above the trigger.

#hover #transform

Live preview Tooltips

Message Tail Clip

Chat-bubble tooltip with a clip-path message tail.

#hover #transform

Live preview Tooltips

Spiral Shell Clip

Tooltip with a spiral shell-like curved shape.

#hover #transform

Live preview Tooltips

Commit Hash

Git commit hash tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Confetti Pop

Tooltip with confetti pop animation above the trigger.

#hover #gradient #transform

Live preview Tooltips

Corners Bracket

Tooltip with corner brackets drawing in above the trigger.

#hover #transform #border

Live preview Tooltips

Cursor Follow

Tooltip that follows the cursor above the trigger.

#hover #animation #transform

Live preview Tooltips

Emerald Tip

Emerald green tooltip with subtle shimmer above the trigger.

#hover #gradient #transform

Live preview Tooltips

Fold Bottom

Tooltip unfolds open below the trigger.

#hover #transform #border

Live preview Tooltips

Glassmorphism Top

Frosted glass tooltip with backdrop blur above the trigger.

#hover #transform #shadow

Live preview Tooltips

Icon Crown

Tooltip with crown icon above the trigger.

#hover #gradient #transform

Live preview Tooltips

Mono Dark

Monospace dark tooltip with terminal feel above the trigger.

#hover #transform #border

Live preview Tooltips

Overline Draw

Tooltip with animated overline drawing above the trigger.

#hover #gradient #transform

Live preview Tooltips

PowerShell

PowerShell blue background tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Pulse Attention

Tooltip that pulses to draw attention above the trigger.

#hover #animation #transform

Live preview Tooltips

Retro 80s

Retro 80s neon sunset tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Rich Avatar

Tooltip with user avatar above the trigger.

#hover #gradient #transform

Live preview Tooltips

Shimmer Loading

Shimmer loading placeholder tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Sky Blue Info

Sky blue tooltip with airy lightness above the trigger.

#hover #gradient #transform

Live preview Tooltips

Slide Diagonal Bottom-Right

Tooltip slides in from the bottom-right corner of the trigger.

#hover #transform #border

Live preview Tooltips

Slide Fade Bottom

Tooltip slides up from below while fading in.

#hover #transform #border

Live preview Tooltips

Speech Bubble Top

Cartoon speech bubble tooltip with tail above the trigger.

#hover #transform #border

Live preview Tooltips

Step Counter

Tooltip with step counter indicator above the trigger.

#hover #transform #border

Live preview Tooltips

Sticky Note

Yellow sticky note tooltip with curl above the trigger.

#hover #transform #shadow

Live preview Tooltips

Typing Hint Tooltip

The tooltip shows three animated dots, as if the hint were still being written.

#hover #animation #transform

Live preview Tooltips

Dashed Arrow Left

Tooltip to the left of the trigger with a dashed connector.

#hover #transform #border

Live preview Tooltips

Diamond Arrow Left

Tooltip with a diamond-shaped pointer on the left side.

#hover #transform

Live preview Tooltips

Double Arrow Left

Tooltip with stacked double-chevron arrow pointing right.

#hover #transform #border

Live preview Tooltips

Double Arrow Right

Tooltip with stacked double-chevron arrow pointing left.

#hover #transform #border

Live preview Tooltips

Line Arrow

Tooltip connected by a thin line above the trigger.

#hover #transform

Live preview Tooltips

No Arrow

Clean tooltip without any arrow above the trigger.

#hover #transform

Live preview Tooltips

Rounded Arrow Bottom

Tooltip with a rounded pill-shaped arrow nub pointing up.

#hover #transform

Live preview Tooltips

Triangle Arrow Top

Tooltip with prominent triangle arrow above the trigger.

#hover #transform #border

Live preview Tooltips

Aurora Borealis

Northern-lights aurora borealis gradient tooltip.

#hover #gradient #transform

Live preview Tooltips

BG Mesh

Tooltip with mesh gradient background above the trigger.

#hover #gradient #transform

Live preview Tooltips

BG Radial

Tooltip background radiates from center above the trigger.

#hover #gradient #transform

Live preview Tooltips

Blinds Open

Tooltip reveals like venetian blinds opening above the trigger.

#hover #transform #border

Live preview Tooltips

Book Page

Book page tooltip with double-page book styling.

#hover #transform #shadow

Live preview Tooltips

Branch Name

Git branch name tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Burnt Orange Glow

Warm burnt orange tooltip with a soft ambient glow.

#hover #transform #shadow

Live preview Tooltips

Carbon Fiber

Carbon fiber weave texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Char Flip

Tooltip characters flip in sequence above the trigger.

#hover #transform #border

Live preview Tooltips

Circle Mask Right

Tooltip reveals via an expanding circle mask from the right.

#hover #transform #border

Live preview Tooltips

Arc Bottom Clip

Tooltip with a curved arc-shaped bottom edge clip-path.

#hover #transform

Live preview Tooltips

Arc Right Clip

Tooltip with a curved arc-shaped right edge clip-path.

#hover #transform

Live preview Tooltips

Circle Grow

Tooltip reveals through a growing circular clip mask.

#hover #transform

Live preview Tooltips

Funnel Clip

Tooltip with a funnel-shaped narrow bottom clip-path.

#hover #transform

Live preview Tooltips

Clip Hex Left

Hexagon-shaped tooltip clipped into form on the left.

#hover #transform

Live preview Tooltips

Leaf Clip

Leaf-shaped tooltip with a curved organic clip-path.

#hover #transform

Live preview Tooltips

Notch Corner BR Clip

Tooltip with a notched bottom-right corner clip-path.

#hover #transform

Live preview Tooltips

Notch Corner TR Clip

Tooltip with a notched top-right corner clip-path.

#hover #transform

Live preview Tooltips

Octagon Clip

Octagon-shaped tooltip clipped into form above the trigger.

#hover #transform

Live preview Tooltips

Triangle Clip Right

Triangle-shaped tooltip pointer to the right of the trigger.

#hover #transform

Live preview Tooltips

Wedge Right Clip

Tooltip with a wedge-shaped right edge clip-path.

#hover #transform

Live preview Tooltips

Wedge Top Clip

Tooltip with a wedge-shaped top edge clip-path.

#hover #transform

Live preview Tooltips

Zigzag Edge Clip

Tooltip with a zigzag bottom edge clip-path.

#hover #transform

Live preview Tooltips

Code Line Numbers

Tooltip with line-numbered code above the trigger.

#hover #transform #shadow

Live preview Tooltips

Comet Tail

Comet tail tooltip with trailing gradient streak.

#hover #gradient #transform

Live preview Tooltips

Coral Sunset Pink

Warm coral-to-pink gradient tooltip evoking a sunset.

#hover #gradient #transform

Live preview Tooltips

Coupon Edge

Tooltip styled like a coupon with notched edges.

#hover #transform

Live preview Tooltips

Crystal Spark

Crystal-like sparkling tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Curtain Left

Tooltip reveals like a curtain opening to the left.

#hover #transform #border

Live preview Tooltips

Cyber Grid

Cyberpunk grid pattern tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Dashed Border Bottom

Tooltip with a dashed border below the trigger.

#hover #transform #border

Live preview Tooltips

Dashed Border Right

Tooltip with a dashed border on the right side.

#hover #transform #border

Live preview Tooltips

Date Picker

Date picker style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Deep Teal Pool

Teal tooltip with a subtle aqua gradient pool effect.

#hover #gradient #transform

Live preview Tooltips

Denim Fabric

Denim fabric texture tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Discrete Transition Tooltip

The bubble animates in from display none using allow-discrete and @starting-style.

#hover #transform #border

Live preview Tooltips

Dotted Border Right

Tooltip with a dotted border on the right side.

#hover #transform #border

Live preview Tooltips

Double Frame Bottom

Tooltip with an outer double-frame border below the trigger.

#hover #transform #shadow

Live preview Tooltips

Double Frame Top

Tooltip with an outer double-frame border above the trigger.

#hover #transform #shadow

Live preview Tooltips

Error Stack

Error stack trace style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Fade Right

Tooltip fades in on the right side pointing left.

#hover #transform #border

Live preview Tooltips

Fan Out Tip

Tooltip that fans out from a point above the trigger.

#hover #transform #border

Live preview Tooltips

Feature Card

Feature highlight card tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Flash Strobe

Tooltip that flashes with a strobe-like opacity animation.

#hover #animation #transform

Live preview Tooltips

Flip X Left

3D flip tooltip on X axis revealing from the left.

#hover #transform #border

Live preview Tooltips

Flip X Right

3D flip tooltip on X axis revealing from the right.

#hover #transform #border

Live preview Tooltips

Glass Frost Cold

Cool-toned frosted glass tooltip with cold blue tint.

#hover #transform #shadow

Live preview Tooltips

Glass Iridescent

Iridescent glass tooltip with a rainbow shimmer overlay.

#hover #gradient #transform

Live preview Tooltips

Green Success

Green success tooltip with checkmark styling above the trigger.

#hover #transform #shadow

Live preview Tooltips

Groove Border Top

Tooltip with a 3D grooved border above the trigger.

#hover #transform #border

Live preview Tooltips

Icon Help

Tooltip with question mark icon above the trigger.

#hover #transform #border

Live preview Tooltips

Inset Border Top

Tooltip with an inset 3D border above the trigger.

#hover #transform #border