Swinging Tag Tooltip
A paper tag drops on a string below a badge and swings to rest like a pendulum. The swing animates the rotate property around a transform-origin at the top of the string.
Also known as: hanging tooltip css, swing animation tooltip, price tag tooltip.
30 days to return it, no receipt needed
HTML
<span class="tip-swinging-tag"> <button type="button" aria-describedby="tip-swinging-tag-tip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 12.5v-8a1 1 0 0 1 1-1h8l8 8-9 9z"/><circle cx="8" cy="8" r="1.2"/></svg>Free returns</button> <span class="tip-swinging-tag-tip" id="tip-swinging-tag-tip" role="tooltip"><b>30 days</b> to return it, no receipt needed</span> </span>
CSS
.tip-swinging-tag {
--c: var(--tip-color, #3b82f6);
font-size: var(--tip-size, 16px);
position: relative;
display: inline-flex;
margin-bottom: 2.5em; /* room for the tag in this preview */
}
.tip-swinging-tag button {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.45em 0.95em;
border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
border-radius: 2em;
background: color-mix(in srgb, var(--c) 10%, transparent);
color: var(--c);
font: 600 0.9em/1.2 system-ui, sans-serif;
cursor: pointer;
}
.tip-swinging-tag svg {
width: 1.15em;
height: 1.15em;
}
.tip-swinging-tag button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.tip-swinging-tag-tip {
position: absolute;
top: calc(100% + 1.2em);
left: 50%;
z-index: 10;
box-sizing: border-box;
width: 10.5em;
padding: 1.5em 0.9em 0.75em;
border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
border-radius: 0.35em 0.35em 0.5em 0.5em;
background: color-mix(in srgb, var(--c) 10%, #fff);
color: color-mix(in srgb, var(--c) 45%, #0f172a);
font: 500 0.75em/1.35 system-ui, sans-serif;
text-align: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
translate: -50% 0;
/* the pivot: the top of the string */
transform-origin: 50% -1.2em;
}
.tip-swinging-tag-tip b {
display: block;
margin-bottom: 0.15em;
color: var(--c);
font-size: 1.45em;
font-weight: 800;
line-height: 1.1;
}
/* the eyelet */
.tip-swinging-tag-tip::before {
content: "";
position: absolute;
top: 0.55em;
left: 50%;
width: 0.55em;
height: 0.55em;
margin-left: -0.275em;
border: 0.14em solid var(--c);
border-radius: 50%;
background: color-mix(in srgb, var(--c) 15%, transparent);
}
/* the string, from the eyelet up to the badge */
.tip-swinging-tag-tip::after {
content: "";
position: absolute;
bottom: calc(100% - 0.8em);
left: 50%;
width: 1px;
height: 2em;
background: var(--c);
}
.tip-swinging-tag:hover .tip-swinging-tag-tip,
.tip-swinging-tag:focus-within .tip-swinging-tag-tip {
opacity: 1;
visibility: visible;
animation: tip-swinging-tag-swing 1.3s ease-in-out both;
}
@keyframes tip-swinging-tag-swing {
0% { opacity: 0; rotate: 22deg; }
15% { opacity: 1; }
34% { rotate: -13deg; }
55% { rotate: 7deg; }
74% { rotate: -3deg; }
89% { rotate: 1deg; }
100% { opacity: 1; rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
.tip-swinging-tag, .tip-swinging-tag *, .tip-swinging-tag::before, .tip-swinging-tag::after, .tip-swinging-tag *::before, .tip-swinging-tag *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--tip-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--tip-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.