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 2 of 7

Live preview Tooltips

Light Top

Clean light tooltip with subtle shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Liquid Ripple

Tooltip that ripples outward like a water drop impact.

#hover #transform #border

Live preview Tooltips

Milestone

Milestone tag tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Mojito Mint

Fresh mojito mint tooltip with lime accent above the trigger.

#hover #gradient #transform

Live preview Tooltips

Mustard Field

Rich mustard yellow tooltip with a vintage field feel.

#hover #transform #border

Live preview Tooltips

Neumorphic Top

Soft neumorphic tooltip with inset shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Obsidian Black

Obsidian black glassy tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Ocean Wave

Ocean blue gradient tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

OKLCH Tone Tooltip

Bubble, arrow and trigger colours are all mixed from one OKLCH hue in OKLAB.

#hover #transform #shadow

Live preview Tooltips

Olive Military

Olive-drab military-styled tooltip with stencil feel.

#hover #transform #border

Live preview Tooltips

Orbit Circles

Tooltip with orbiting circles decoration above the trigger.

#hover #animation #transform

Live preview Tooltips

Pastel Soft

Soft pastel tooltip with gentle colors above the trigger.

#hover #transform #shadow

Live preview Tooltips

Pearl White

Pearl white shimmering tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Pencil Sketch

Pencil sketch style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Pink Bubble

Pink bubble tooltip with rounded corners above the trigger.

#hover #transform #shadow

Live preview Tooltips

Powder Sky

Soft powder-blue tooltip reminiscent of a clear sky.

#hover #transform #shadow

Live preview Tooltips

Progress Bar

Tooltip with animated progress bar above the trigger.

#hover #gradient #transform

Live preview Tooltips

Progress Circular

Tooltip with circular progress indicator above the trigger.

#hover #animation #transform

Live preview Tooltips

Progress Ring

Circular progress ring tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Pulse Throb

Tooltip that throbs with a gentle pulse animation on hover.

#hover #animation #transform

Live preview Tooltips

Rich Content

Tooltip with rich multi-line content above the trigger.

#hover #transform #shadow

Live preview Tooltips

Ridge Border Bottom

Tooltip with a 3D ridged border below the trigger.

#hover #transform #border

Live preview Tooltips

Robot Circuit

Robot circuit tooltip with PCB-style green-and-cyan grid.

#hover #gradient #transform

Live preview Tooltips

Rotate Left

Tooltip rotates in from the left with a spin animation.

#hover #transform #border

Live preview Tooltips

Rotate In Top

Tooltip rotates into place above the trigger.

#hover #transform #border

Live preview Tooltips

Scale In Left

Tooltip scales in from the left of the trigger.

#hover #transform #border

Live preview Tooltips

Pop Scale Tooltip

The bubble springs open from the trigger with a slight overshoot before settling.

#hover #transform #border

Live preview Tooltips

Shimmer Wave

Tooltip with a shimmering wave gradient sweeping across.

#hover #animation #gradient

Live preview Tooltips

Shutter Diagonal

Tooltip reveals through a diagonal shutter wipe.

#hover #transform #border

Live preview Tooltips

Silver Metallic

Silver metallic tooltip with subtle gradient above the trigger.

#hover #gradient #transform

Live preview Tooltips

Skew Top

Tooltip skews into place above the trigger.

#hover #transform #border

Live preview Tooltips

Slide Diagonal Bottom-Left

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

#hover #transform #border

Live preview Tooltips

Slide Right

Tooltip slides in from the left toward the right side.

#hover #transform #border

Live preview Tooltips

Spotlight Radial

Tooltip with a radial spotlight gradient highlighting its center.

#hover #gradient #transform

Live preview Tooltips

Spring Top

Tooltip bounces with a spring overshoot above the trigger.

#hover #transform #border

Live preview Tooltips

St Patrick Clover

Lucky green St Patrick's Day clover tooltip.

#hover #gradient #transform

Live preview Tooltips

Status Away

Away status tooltip with yellow dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Status Offline

Offline status tooltip with grey dot above the trigger.

#hover #transform #border

Live preview Tooltips

Status Online

Online status tooltip with green dot above the trigger.

#hover #transform #shadow

Live preview Tooltips

Status Pill

Pill-shaped status tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

Sticker Peel

Tooltip that peels up like a sticker above the trigger.

#hover #transform #shadow

Live preview Tooltips

Stock Status

Stock availability status tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Stretch X

Tooltip stretches horizontally into view above the trigger.

#hover #transform #border

Live preview Tooltips

Stretch Y

Tooltip stretches vertically into view above the trigger.

#hover #transform #border

Live preview Tooltips

Sunset Blaze

Vibrant sunset-blaze gradient tooltip.

#hover #gradient #transform

Live preview Tooltips

Swing Top

Tooltip swings in like a pendulum above the trigger.

#hover #transform #border

Live preview Tooltips

Tada Success

Success tooltip celebrates with a tada animation above the trigger.

#hover #animation #transform

Live preview Tooltips

Tick Marks Bottom

Tooltip with tick-mark decorations along its bottom edge.

#hover #gradient #transform

Live preview Tooltips

Time Stamp

Timestamp tooltip above the trigger.

#hover #transform #border

Live preview Tooltips

Valentine Heart

Romantic pink valentine heart tooltip.

#hover #gradient #transform

Live preview Tooltips

Zig Zag

Tooltip that zigzags into view above the trigger.

#hover #animation #transform

Live preview Tooltips

Zoom In Right

Tooltip zooms in from small to full size on the right.

#hover #transform #border

Live preview Tooltips

Zoom Out Right

Tooltip zooms out from oversized to normal on the right.

#hover #transform #border

Live preview Tooltips

Zoom Out Top

Tooltip zooms from tiny to full size above the trigger.

#hover #transform #border

Live preview Tooltips

3D Perspective Zoom

Tooltip that zooms in with a 3D perspective tilt effect.

#hover #transform #border

Live preview Tooltips

3D Popout

Tooltip that pops out toward the viewer in 3D perspective.

#hover #transform #border

Live preview Tooltips

3D Rotate X

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

#hover #transform #border

Live preview Tooltips

3D Tilt X

Tooltip that tilts on the X axis as it appears above the trigger.

#hover #transform #border

Live preview Tooltips

3D Tilt Y

Tooltip that tilts on the Y axis as it appears above the trigger.

#hover #transform #border

Live preview Tooltips

3D Top

Tooltip with 3D depth shadow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Alien UFO

Alien UFO tooltip with saucer-shape clip-path.

#hover #gradient #transform

Live preview Tooltips

Amber Warning

Amber warning tooltip with attention glow above the trigger.

#hover #transform #shadow

Live preview Tooltips

Amethyst Purple

Amethyst purple gem tooltip above the trigger.

#hover #gradient #transform

Live preview Tooltips

Arrow Clip

Tooltip reveals with an arrow clip-path above the trigger.

#hover #transform #border

Live preview Tooltips

Cross Arrow Bottom

Tooltip with a plus-shaped cross indicator pointing up.

#hover #transform

Live preview Tooltips

Cross Arrow Top

Tooltip with a plus-shaped cross indicator pointing down.

#hover #transform

Live preview Tooltips

Dashed Arrow Bottom

Tooltip below the trigger connected by a dashed line with arrow.

#hover #transform #border

Live preview Tooltips

Dashed Arrow Right

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

#hover #transform #border

Live preview Tooltips

Dashed Arrow Top

Tooltip connected to the trigger by a dashed line with arrow.

#hover #transform #border

Live preview Tooltips

Diamond Arrow Bottom

Tooltip with a diamond-shaped pointer pointing up.

#hover #transform

Live preview Tooltips

Diamond Arrow Right

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

#hover #transform

Live preview Tooltips

Diamond Arrow Top

Tooltip with a diamond-shaped pointer pointing down.

#hover #transform

Live preview Tooltips

Dot Arrow

Tooltip connected by a small dot above the trigger.

#hover #transform

Live preview Tooltips

Dot Pulse Arrow

Tooltip with a pulsing dot indicator above the trigger.

#hover #animation #transform

Live preview Tooltips

Double Arrow Bottom

Tooltip with stacked double-chevron arrow pointing up.

#hover #transform #border

Live preview Tooltips

Double Arrow Top

Tooltip with a stacked double-chevron arrow pointing down.

#hover #transform #border

Live preview Tooltips

Fading Arrow Tooltip

A classic bubble with a pointed arrow that fades upward into place on hover.

#hover #transform #shadow

Live preview Tooltips

Heart Arrow Bottom

Tooltip with a heart-shaped pointer below the trigger.

#hover #transform

Live preview Tooltips

Heart Arrow Top

Tooltip with a heart-shaped pointer above the trigger.

#hover #transform

Live preview Tooltips

Line Horizontal Arrow

Tooltip connected by a solid horizontal line indicator on the right.

#hover #transform

Live preview Tooltips

Line Vertical Arrow

Tooltip connected by a solid vertical line indicator above.

#hover #transform

Live preview Tooltips

Rounded Arrow Left

Tooltip with rounded pill-shaped arrow nub on the left side.

#hover #transform

Live preview Tooltips

Rounded Arrow Right

Tooltip with rounded pill-shaped arrow nub on the right side.

#hover #transform

Live preview Tooltips

Rounded Arrow Top

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

#hover #transform

Live preview Tooltips

Square Arrow Bottom

Tooltip with a sharp square-cut arrow pointing up.

#hover #transform

Live preview Tooltips

Square Arrow Right

Tooltip with a sharp square-cut arrow pointing left.

#hover #transform

Live preview Tooltips

Square Arrow Top

Tooltip with a sharp square-cut arrow pointing down.

#hover #transform

Live preview Tooltips

Star Arrow Bottom

Tooltip with a star-shaped pointer below the trigger.

#hover #transform

Live preview Tooltips

Star Arrow Top

Tooltip with a star-shaped pointer above the trigger.

#hover #transform

Live preview Tooltips

Aurora Tip

Aurora borealis gradient tooltip above the trigger.

#hover #animation #gradient

Live preview Tooltips

Autumn Leaf

Warm autumn-leaf tooltip in fall colors.

#hover #gradient #transform

Live preview Tooltips

Badge Count

Tooltip with notification badge count above the trigger.

#hover #transform #border

Live preview Tooltips

Bash Shell

Bash shell style tooltip above the trigger.

#hover #transform #shadow

Live preview Tooltips

BG Aurora

Tooltip with aurora gradient background above the trigger.

#hover #animation #gradient