How to Build a CSS Tooltip (No JavaScript)
Tooltips provide contextual information when users hover over or focus on an element. A pure CSS tooltip requires no JavaScript library, loads instantly, and is surprisingly simple to build. The key is a data attribute, a pseudo-element, and a CSS transform.
- Create accessible CSS tooltips with arrows, custom positioning, and animations.
- The Basic CSS Tooltip.
- Covers adding tooltip arrows.
- Covers positioning: top, bottom, left, right.
- Covers making tooltips accessible.
The Basic CSS Tooltip
The simplest tooltip uses a data attribute and the ::after pseudo-element:
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
background: #1a1a2e;
color: #fff;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
Usage in HTML: Click here
Adding Tooltip Arrows
A CSS triangle on the ::before pseudo-element creates the arrow:
gap instead of margin hacks for flexbox spacing. It keeps layout code cleaner and is supported in all modern browsers.[data-tooltip]::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1a1a2e;
opacity: 0;
transition: opacity 0.2s;
}
[data-tooltip]:hover::before { opacity: 1; }
The arrow is created by making all borders transparent except the one pointing toward the trigger element. For a bottom tooltip, use border-bottom-color instead.
Positioning: Top, Bottom, Left, Right
Control tooltip position with a modifier class or data attribute. For a bottom tooltip, change bottom: calc(100% + 8px) to top: calc(100% + 8px) and flip the arrow direction. For left/right, use left: calc(100% + 8px) or right: calc(100% + 8px) with top: 50% and translateY(-50%). The CSS Tooltip Generator lets you preview all four positions and generates the exact CSS for each.
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.Making Tooltips Accessible
CSS-only tooltips have an accessibility limitation: they only appear on hover, which excludes keyboard and touch users. For production use, add tabindex='0' to the trigger element and use :focus-visible in addition to :hover:
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; }
Add role='tooltip' and aria-describedby to the tooltip content for screen reader support. If the tooltip contains essential information (not just supplementary), consider using a visible label instead.
Frequently Asked Questions
How do I create a tooltip in CSS without JavaScript?
How do I add an arrow to a CSS tooltip?
Are CSS tooltips accessible?
Use the CSS Tooltip Generator — free, no signup required.
⚡ Open CSS Tooltip Generator