Focused specifically on building the pure-CSS tooltip bubble with a pointed triangle arrow, using the classic border trick. Pick a position and alignment, style it, then copy the HTML and CSS.
The arrow here uses the classic zero-width, zero-height border technique, with border widths and offsets computed from your actual control values instead of hardcoded numbers.
Four sides and three alignments give you the full set of realistic tooltip positions.
Border width and offset scale with the arrow size and radius controls, not fixed values.
Get the button, tooltip span and ::after arrow rule ready to paste into your project.
Position it, style it, then take the code with you.
A CSS border can be split into four independent triangles where two opposite sides meet, which is the basis of the tooltip arrow trick used here. Give an empty, zero-size element a border on all four sides, make three of those borders transparent, and the fourth border remains visible as a solid triangle pointing away from the box. Which side stays colored, and how far the arrow sits from the edge of the bubble, is exactly what changes between the 12 placements in this generator: a tooltip above its target needs a downward-pointing arrow using the top border, one to the left needs a rightward-pointing arrow using the left border, and so on. Getting the offset right so the arrow visually points at the trigger element, rather than floating in the wrong spot, is the part that is easy to get wrong by hand and easy to get right with a live preview.
Adjacent CSS borders meet at 45-degree angles by default. Zeroing the element's width and height turns those angled borders into a full triangle.
The visible border side should always match the tooltip's background color so the arrow reads as part of the same shape, not a separate element.
Start, center and end alignment shift both the bubble and its arrow along the same axis, keeping the arrow pointed at a consistent spot relative to the trigger.
This tool builds the visual bubble and arrow. For production tooltips, pair the markup with appropriate ARIA attributes and keyboard focus handling.
A pseudo-element is given a transparent border on three sides and a solid color on the fourth side. That single colored side forms a triangle that points toward the trigger element.
Combining the four sides (top, right, bottom, left) with three alignments (start, center, end) covers realistic tooltip placements against buttons and elements of any size.
Yes. This tool focuses specifically on building the pure-CSS bubble-and-arrow shape. Pairing the result with proper ARIA attributes is still recommended for production use.
Yes. Toggle always-visible mode to preview the bubble without hovering, which is useful for screenshots or design review.
Yes. It is completely free, requires no account, and the tooltip is built and rendered entirely in your browser.
Keep building interface details with these free online CSS tools.