This builds a hover tooltip in pure CSS. Enter a direction, gap, arrow size, colors and font size, and you get the bubble and arrow declarations together, with a preview above you can hover or reach with the keyboard.
The bubble text lives in a data-tip attribute and the CSS reads it with content: attr(data-tip). The arrow is the border trick on a zero-sized element, so its box is twice the stated size; that is why the arrow offset is the gap minus twice the arrow size. Set the gap equal to the arrow size and the tip meets the element exactly. Behavior follows the W3C CSS Generated Content specification (as of October 2026).
A pure-CSS tooltip can be clipped at the edge of the viewport and will not flip direction on its own. Touch devices have no hover either, so never put essential information in a tooltip alone. This tool does not generate screen-reader descriptions or automatic repositioning code.
Frequently asked questions
Because content: attr(data-tip) reads the attribute value. That lets every element carry its own wording while the CSS is written only once.
The arrow is only the visible half of a border box twice its size. Subtracting double the size puts the flat edge of the visible triangle flush against the bubble.
Then no transition runs and it cannot fade in. Pairing opacity with visibility keeps the fade while still blocking pointer events.