Tooltip on Disabled Button
Explains why a button is disabled with a checklist of what is missing, and the lock gives a shake. Disabled buttons ignore the pointer and focus, so a focusable wrapper holds the hover.
Also known as: disabled button tooltip css, why is this disabled tooltip, tooltip on disabled element.
HTML
<span class="tip-disabled-button" tabindex="0" aria-describedby="tip-disabled-button-tip">
<button type="button" disabled><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="10.5" width="14" height="10" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/></svg>Publish</button>
<span class="tip-disabled-button-tip" id="tip-disabled-button-tip" role="tooltip">
<b>Not ready to publish</b>
<span class="tip-disabled-button-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12.3 2.8 2.8L16.2 9.5"/></svg>Cover image</span>
<span class="tip-disabled-button-todo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5" stroke-dasharray="3 3"/></svg>Add a title</span>
</span>
</span>CSS
.tip-disabled-button {
--c: var(--tip-color, #3b82f6);
font-size: var(--tip-size, 16px);
position: relative;
display: inline-flex;
margin-top: 5em; /* room for the tooltip in this preview */
border-radius: 0.55em;
cursor: not-allowed;
}
.tip-disabled-button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.tip-disabled-button button {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.6em 1.2em;
border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
border-radius: 0.5em;
background: color-mix(in srgb, currentColor 7%, transparent);
color: color-mix(in srgb, currentColor 50%, transparent);
font: 600 1em system-ui, sans-serif;
/* a disabled button never gets pointer events, so let the wrapper take them */
pointer-events: none;
}
.tip-disabled-button svg {
width: 1.15em;
height: 1.15em;
}
.tip-disabled-button button svg { transform-origin: 50% 20%; }
.tip-disabled-button:hover button svg,
.tip-disabled-button:focus-visible button svg {
animation: tip-disabled-button-shake 0.45s ease-in-out;
}
.tip-disabled-button-tip {
position: absolute;
bottom: calc(100% + 0.7em);
left: 50%;
z-index: 10;
display: grid;
gap: 0.3em;
padding: 0.7em 0.9em 0.75em;
border: 1px solid rgb(15 23 42 / 0.12);
border-radius: 0.6em;
background: #fff;
box-shadow: 0 0.8em 1.6em -0.6em rgb(15 23 42 / 0.35);
color: #334155;
font: 500 0.8em/1.3 system-ui, sans-serif;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 0.4em);
transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}
.tip-disabled-button-tip::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
box-sizing: border-box;
width: 0.75em;
height: 0.75em;
border: inherit;
border-top: 0;
border-left: 0;
border-radius: 0 0 0.12em;
background: inherit;
transform: translate(-50%, -55%) rotate(45deg);
}
.tip-disabled-button-tip b {
margin-bottom: 0.15em;
color: #0f172a;
font-weight: 700;
}
.tip-disabled-button-done,
.tip-disabled-button-todo {
display: flex;
align-items: center;
gap: 0.45em;
}
.tip-disabled-button-done {
color: #94a3b8;
text-decoration: line-through;
}
.tip-disabled-button-done svg { color: var(--c); }
.tip-disabled-button-todo { font-weight: 600; }
.tip-disabled-button-todo svg { color: #94a3b8; }
.tip-disabled-button:hover .tip-disabled-button-tip,
.tip-disabled-button:focus-within .tip-disabled-button-tip {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
@keyframes tip-disabled-button-shake {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-14deg); }
40% { transform: rotate(11deg); }
60% { transform: rotate(-7deg); }
80% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
.tip-disabled-button, .tip-disabled-button *, .tip-disabled-button::before, .tip-disabled-button::after, .tip-disabled-button *::before, .tip-disabled-button *::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.