CSS Tricks
CSS Trick

Pure CSS Tooltips

Lightweight tooltips using data attributes and pseudo-elements.

#css #tooltips #attr #pseudo-elements

Browser Support

✓ Chrome 4+ ✓ Firefox 2+ ✓ Safari 3.1+ ✗ Edge

Pure CSS Tooltips

Create tooltips without JavaScript using attr() and pseudo-elements.

[data-tooltip] {
  position: relative;
}


[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem;
  background: #333;
  color: white;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}


[data-tooltip]:hover::after {
  opacity: 1;
}

Live Demo

CSS Tooltips
HOVER
#1a1a2e
0.2s
CSS Code
.tooltip-btn {
position: relative;
padding: 0.625rem 1.25rem;
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
border: none;
border-radius: 0.5rem;
color: white;
font-weight: 600;
cursor: pointer;
}
.tooltip-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 0.4rem 0.6rem;
background: #1a1a2e;
color: white;
border-radius: 0.375rem;
font-size: 0.7rem;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
margin-bottom: 6px;
}
.tooltip-btn:hover::after {
opacity: 1;
}
.demo-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}

Best for simple hints. For accessible tooltips, use a proper component library.

Share this CSS trick

Comments