This is a tooltip
Toggle ON — hover to see interaction
Generated Code
Pure CSS tooltips use the ::after pseudo-element and a data-tooltip attribute — no JavaScript required. The tooltip is hidden by default and shown on :hover using opacity and visibility properties. The arrow is created using the CSS border trick on the ::before pseudo-element.
Use the generator above to set position, colors, size and animation — then copy both the CSS and HTML snippets into your project.
/* The tooltip content comes from a data attribute */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip); /* reads the attribute */
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background: #1c1c28;
color: #f0f0ff;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, transform 0.2s;
}
[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
| Position | CSS placement | Arrow direction |
|---|---|---|
| Top | bottom: calc(100% + offset) | Points down toward element |
| Bottom | top: calc(100% + offset) | Points up toward element |
| Left | right: calc(100% + offset) | Points right toward element |
| Right | left: calc(100% + offset) | Points left toward element |
CSS-only tooltips should supplement — not replace — accessible labeling. For interactive elements, use aria-label or aria-describedby so screen readers can access the tooltip content. The data-tooltip attribute is not read by assistive technology on its own.
Yes — this generator outputs pure CSS and HTML. The tooltip appears on :hover using CSS opacity and visibility transitions. No JavaScript is needed for show/hide behaviour.
display: none cannot be transitioned — the tooltip would appear and disappear instantly with no animation. Using opacity: 0; visibility: hidden together allows the fade/slide animation to play while keeping the element invisible and non-interactive when hidden.
Add :focus-visible alongside :hover in your selectors: [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; }. This ensures keyboard and screen reader users can also access the tooltip.
Remove white-space: nowrap and set a fixed max-width on the ::after pseudo-element. The tooltip will wrap naturally. You can also use \A in the content string to force line breaks, but this requires hardcoding the breaks in your HTML.
Related tools: CSS Triangle Generator · CSS Button Generator · CSS Transition Generator