Contact

Tools  /  CSS  /  CSS Tooltip Generator

CSS

CSS Tooltip Generator

A speech-bubble tooltip with a real functional arrow, in 4 positions x 3 alignments, shown on real hover -- editable text, colours, fade animation, presets, randomize, and export to CSS, Tailwind, SCSS or React.

More CSS tools

CSS Text Effect Generator CSS Gradient Generator Box Shadow Generator Border Radius Generator Glassmorphism Generator CSS Animation Generator

What this tool does

Builds a speech-bubble tooltip that appears on real :hover — not a static screenshot of one — with a genuine CSS-only arrow pointing at the hovered element, built from the classic transparent-border triangle trick.

Position, alignment and the arrow

Four positions (top, bottom, left, right) times three alignments (start, center, end) cover 12 placement combinations, each correctly repositioning both the bubble and its arrow together — the arrow always points at the same spot on the anchor regardless of alignment, matching the exact background colour so it reads as one continuous shape rather than a separate triangle.

Appearance and behaviour

Tooltip text, background and text colour, font size, padding, corner radius, and offset from the anchor are all adjustable. Long text can wrap at a set max-width instead of forcing a single line, a drop shadow can be toggled, and a fade-in transition smooths the reveal instead of an instant pop.

Previewing without hovering

An "always show" toggle keeps the bubble visible in the preview without needing to hover it — useful for checking small details like the arrow position without repeatedly moving the mouse on and off.

Presets and randomizing

Five presets — Dark Minimal, Light Card, Colorful Warning, No Arrow, and Wrapped Text — cover common looks, plus a randomize button for quick exploration.

Getting it out

Export as plain CSS, a Tailwind markup snippet using the group/group-hover pattern (Tailwind has no plain CSS-sibling hover utility), SCSS, or a pair of React style objects, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. The tooltip is built and rendered entirely in the browser -- nothing is sent to a server.
How is the arrow actually built with CSS?
Using the classic transparent-border triangle trick -- a zero-size element with a border on one side coloured to match the bubble and the other three sides transparent, which renders as a solid triangle pointing away from the bubble.
Can I see the tooltip without hovering over it every time?
Yes -- an "Always show in preview" toggle keeps the bubble visible without hovering, useful for checking small details like the arrow position repeatedly.
Does the arrow move correctly when I change the alignment?
Yes -- the arrow's position is recalculated together with the bubble's position for every combination of the 4 positions and 3 alignments, so it always points at the same spot on the hovered element.
Can long tooltip text wrap onto multiple lines?
Yes -- turning on wrap sets a max-width and lets the text wrap, instead of the default single-line, no-wrap behaviour.
Why does the Tailwind export use group-hover instead of a plain hover class?
Tailwind has no utility for one element's hover state to reveal a separate sibling element, so the standard group / group-hover pattern is used instead -- it's the correct Tailwind idiom for this, not a workaround.
Theme Accent