Classic Tooltip Hover Effect
The tooltip every icon button needs: a dark bubble with an arrow that fades in and rises into place. The text comes from a data-tip attribute, and both pieces are pseudo-elements.
Also known as: css tooltip on hover, pure css tooltip with arrow, data attribute tooltip.
HTML
<button class="hfx-tooltip-fade-up" aria-label="Copy link" data-tip="Copy link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1"/><path d="M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1"/></svg></button>
CSS
.hfx-tooltip-fade-up {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 2.75em;
height: 2.75em;
padding: 0;
border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
border-radius: 0.65em;
background: color-mix(in srgb, var(--c) 8%, transparent);
color: var(--c);
cursor: pointer;
}
.hfx-tooltip-fade-up svg { width: 1.3em; height: 1.3em; }
.hfx-tooltip-fade-up::before,
.hfx-tooltip-fade-up::after {
position: absolute;
left: 50%;
font-size: 0.8em;
background: #1e293b;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
/* the bubble */
.hfx-tooltip-fade-up::after {
content: attr(data-tip);
bottom: calc(100% + 0.9em);
padding: 0.45em 0.75em;
border-radius: 0.45em;
box-shadow: 0 0.4em 1em -0.3em rgba(0, 0, 0, 0.4);
color: #fff;
font-family: system-ui, sans-serif;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
transform: translate(-50%, 0.5em);
}
/* the arrow: a rotated square tucked under the bubble */
.hfx-tooltip-fade-up::before {
content: "";
bottom: calc(100% + 0.55em);
width: 0.7em;
height: 0.7em;
transform: translate(-50%, 0.5em) rotate(45deg);
}
.hfx-tooltip-fade-up:is(:hover, :focus-visible)::after {
opacity: 1;
transform: translate(-50%, 0);
}
.hfx-tooltip-fade-up:is(:hover, :focus-visible)::before {
opacity: 1;
transform: translate(-50%, 0) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
.hfx-tooltip-fade-up, .hfx-tooltip-fade-up *, .hfx-tooltip-fade-up::before, .hfx-tooltip-fade-up::after, .hfx-tooltip-fade-up *::before, .hfx-tooltip-fade-up *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<button aria-label="Copy link" class="group relative grid h-11 w-11 place-items-center rounded-lg border border-blue-500/35 bg-blue-500/10 text-blue-500"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1"/><path d="M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1"/></svg> <span class="pointer-events-none absolute bottom-full left-1/2 mb-3 -translate-x-1/2 translate-y-2 whitespace-nowrap rounded-md bg-slate-800 px-3 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition duration-200 group-hover:translate-y-0 group-hover:opacity-100 after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:border-[5px] after:border-transparent after:border-t-slate-800">Copy link</span> </button>
Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.