Tooltip Generator
Create tooltips on four sides with arrow, colours, padding and radius. No JavaScript needed. Copy the CSS and HTML.
.tooltip { position: relative; display: inline-block; }
.tooltip .tip {
position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
background: #1e2230; color: #ffffff;
padding: 6px 10px; border-radius: 8px;
font-size: 13px; white-space: nowrap;
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.tooltip:hover .tip { opacity: 1; }
.tooltip .tip::after {
content: ""; position: absolute; border: 5px solid transparent;
top: 100%; left: 50%; margin-left: -5px; border-top-color: #1e2230;
}
<!-- HTML: <span class="tooltip">Hover me<span class="tip">Tooltip text</span></span> -->About the tooltip generator
A CSS-only tooltip is an absolutely positioned element inside a relatively positioned trigger, revealed on hover. The arrow is a pseudo-element using the classic border trick: a zero-size box with three transparent borders and one coloured one.
It needs no JavaScript, which makes it the right choice for simple hints. Anything that needs to stay open, be dismissed, or hold interactive content should use a popover instead.
How to use it
- 1Type the tooltip text and pick a side.
- 2Set background and text colours, then padding and radius.
- 3Toggle the arrow.
- 4Copy the CSS and HTML.
Worth knowing
- Tooltips do not work on touch devices, so never hide essential information in one.
Questions
How does the arrow work?
A pseudo-element with zero width and height and a thick border. Three sides are transparent and one is coloured, so only a triangle is painted.
Why is my tooltip cut off?
An ancestor has overflow: hidden. Either remove it, or render the tooltip in a portal at the end of the body.
Are CSS tooltips accessible?
Partly. Add aria-describedby linking the trigger to the tooltip, and make sure the tooltip also appears on keyboard focus, not just hover.