Publicar artículo
- Título y resumen
- Imagen de portadaFalta
Disabled button reason tooltip
A disabled button explains what is missing in a tooltip with a caution stripe and a shortcut to fix it on the spot.
Settings
Code
<div class="uvq08-dis" data-s="todo"><div class="cd"><p class="hd">Publish article</p><ul><li class="ok"><i aria-hidden="true"></i><span>Title and summary</span></li><li class="im"><i aria-hidden="true"></i><span>Cover image</span><em>Missing</em></li></ul><div class="ft"><span class="wr pk"><button type="button" class="pb" aria-disabled="true" aria-describedby="uvq08-dis-n"><span class="a">Publish</span><span class="b">Published</span></button><span class="tt"><span class="no"><span class="lk" aria-hidden="true"><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.5"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/></svg></span><span id="uvq08-dis-n">The cover image is missing</span><button type="button" class="fx">Add image</button></span><span class="ys" id="uvq08-dis-y">All set to publish</span></span></span></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Tooltips
See all TooltipsWhere to use it
A publish card whose button stays disabled with aria-disabled, so it can still be focused and explain itself. Hover or focus it and a tooltip with a striped caution edge says what is missing and offers a button to fix it right there. Clicking the disabled button shakes it and nudges the tooltip. Once fixed, the button turns active and then confirms the publish.
The main color is the caution stripe and the action, the second the dark band between stripes. Use this pattern for any blocked action, from checkout to settings, so people learn why something is off instead of guessing.