UI Components Easy
Tooltip with Arrow Variants
CSS-only tooltips with four directional arrow variants (top, right, bottom, left). Triggered on hover and focus, with smooth fade-in and accessible markup.
Open in Lab
MCP
css pseudo-elements css-variables
Targets: HTML
Code
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, sans-serif;
background: #0f172a;
color: #f1f5f9;
min-height: 100vh;
display: grid;
place-items: center;
padding: 2rem;
}
.demo {
display: flex;
flex-direction: column;
gap: 3rem;
align-items: center;
}
.demo-title {
font-size: 1.25rem;
font-weight: 700;
color: #f1f5f9;
}
/* ── Tooltip base ── */
.tooltip-wrap {
position: relative;
display: inline-block;
}
/* Bubble */
.tooltip-wrap::after {
content: attr(data-tooltip);
position: absolute;
z-index: 100;
white-space: nowrap;
font-size: 0.8rem;
font-weight: 500;
line-height: 1;
padding: 0.45rem 0.75rem;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.12);
color: #e2e8f0;
border-radius: 0.45rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Arrow */
.tooltip-wrap::before {
content: "";
position: absolute;
z-index: 101;
width: 0;
height: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Show on hover / focus-within */
.tooltip-wrap:hover::before,
.tooltip-wrap:hover::after,
.tooltip-wrap:focus-within::before,
.tooltip-wrap:focus-within::after {
opacity: 1;
}
/* ── Top ── */
.tooltip--top::after {
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
}
.tooltip--top:hover::after,
.tooltip--top:focus-within::after {
transform: translateX(-50%) translateY(0);
}
.tooltip--top::before {
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%) translateY(4px);
border: 6px solid transparent;
border-top-color: #1e293b;
}
.tooltip--top:hover::before,
.tooltip--top:focus-within::before {
transform: translateX(-50%) translateY(0);
}
/* ── Right ── */
.tooltip--right::after {
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%) translateX(-4px);
}
.tooltip--right:hover::after,
.tooltip--right:focus-within::after {
transform: translateY(-50%) translateX(0);
}
.tooltip--right::before {
left: calc(100% + 4px);
top: 50%;
transform: translateY(-50%) translateX(-4px);
border: 6px solid transparent;
border-right-color: #1e293b;
}
.tooltip--right:hover::before,
.tooltip--right:focus-within::before {
transform: translateY(-50%) translateX(0);
}
/* ── Bottom ── */
.tooltip--bottom::after {
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
}
.tooltip--bottom:hover::after,
.tooltip--bottom:focus-within::after {
transform: translateX(-50%) translateY(0);
}
.tooltip--bottom::before {
top: calc(100% + 4px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
border: 6px solid transparent;
border-bottom-color: #1e293b;
}
.tooltip--bottom:hover::before,
.tooltip--bottom:focus-within::before {
transform: translateX(-50%) translateY(0);
}
/* ── Left ── */
.tooltip--left::after {
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%) translateX(4px);
}
.tooltip--left:hover::after,
.tooltip--left:focus-within::after {
transform: translateY(-50%) translateX(0);
}
.tooltip--left::before {
right: calc(100% + 4px);
top: 50%;
transform: translateY(-50%) translateX(4px);
border: 6px solid transparent;
border-left-color: #1e293b;
}
.tooltip--left:hover::before,
.tooltip--left:focus-within::before {
transform: translateY(-50%) translateX(0);
}
/* ── Demo buttons ── */
.tooltip-grid {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.demo-btn {
padding: 0.6rem 1.25rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.625rem;
color: #e2e8f0;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
}
.demo-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
/* ── Examples section ── */
.tooltip-examples {
display: flex;
flex-direction: column;
gap: 1.25rem;
align-items: center;
}
.examples-title {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #475569;
}
.example-row {
display: flex;
gap: 0.75rem;
align-items: center;
}
.icon-btn {
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.625rem;
color: #94a3b8;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #f1f5f9;
}
.icon-btn.locked {
opacity: 0.5;
cursor: not-allowed;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tooltip Variants</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="demo">
<h2 class="demo-title">Tooltip Variants</h2>
<div class="tooltip-grid">
<!-- Top -->
<div class="tooltip-wrap tooltip--top" data-tooltip="Tooltip on top">
<button class="demo-btn">Top</button>
</div>
<!-- Right -->
<div class="tooltip-wrap tooltip--right" data-tooltip="Tooltip on right">
<button class="demo-btn">Right</button>
</div>
<!-- Bottom -->
<div class="tooltip-wrap tooltip--bottom" data-tooltip="Tooltip on bottom">
<button class="demo-btn">Bottom</button>
</div>
<!-- Left -->
<div class="tooltip-wrap tooltip--left" data-tooltip="Tooltip on left">
<button class="demo-btn">Left</button>
</div>
</div>
<div class="tooltip-examples">
<h3 class="examples-title">Real-world examples</h3>
<div class="example-row">
<div class="tooltip-wrap tooltip--top" data-tooltip="Copy to clipboard">
<button class="icon-btn" aria-label="Copy">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
</button>
</div>
<div class="tooltip-wrap tooltip--top" data-tooltip="Share link">
<button class="icon-btn" aria-label="Share">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
</button>
</div>
<div class="tooltip-wrap tooltip--top" data-tooltip="Add to favorites">
<button class="icon-btn" aria-label="Favorite">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
</button>
</div>
<div class="tooltip-wrap tooltip--bottom" data-tooltip="Requires Pro plan">
<button class="icon-btn locked" aria-label="Locked feature">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</button>
</div>
</div>
</div>
</div>
</body>
</html>Tooltip with Arrow Variants
Pure CSS tooltips in four directions — top, right, bottom, left — using ::before (arrow) and ::after (bubble) pseudo-elements on the trigger element. No JavaScript required.
How it works
Each tooltip trigger carries a data-tooltip attribute for the text and a positional class (tooltip--top, tooltip--right, etc.):
<button class="tooltip--top" data-tooltip="Saved!" aria-describedby="tip-1">
Save
</button>The pseudo-elements are position: absolute, positioned relative to the trigger’s position: relative wrapper. Visibility toggles on :hover and :focus-visible.
Arrow technique
A zero-size ::before with border tricks creates the directional arrow:
.tooltip--top::before {
border: 6px solid transparent;
border-top-color: var(--tooltip-bg);
}When to use it
- Icon buttons that need labels
- Form field hints
- Table cell explanations