Publicar artículo
- Título y resumen
- Imagen de portadaFalta
Por qué está desactivado
El botón desactivado explica qué falta en un tooltip con franja de aviso y un atajo para resolverlo ahí mismo.
Ajustes
Código
<div class="uvq08-dis" data-s="todo"><div class="cd"><p class="hd">Publicar artículo</p><ul><li class="ok"><i aria-hidden="true"></i><span>Título y resumen</span></li><li class="im"><i aria-hidden="true"></i><span>Imagen de portada</span><em>Falta</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">Publicar</span><span class="b">Publicado</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">Falta la imagen de portada</span><button type="button" class="fx">Añadir imagen</button></span><span class="ys" id="uvq08-dis-y">Todo listo para publicar</span></span></span></div></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Una tarjeta de publicación cuyo botón sigue desactivado con aria-disabled, así que puede recibir el foco y explicarse. Pasa o enfócalo y un tooltip con borde de franjas de aviso cuenta qué falta y ofrece un botón para resolverlo ahí mismo. Al pulsar el botón desactivado, tiembla y el tooltip da un toque. Una vez resuelto, el botón se activa y luego confirma la publicación.
El color principal es la franja de aviso y la acción, y el secundario la banda oscura entre franjas. Usa este patrón en cualquier acción bloqueada, del pago a los ajustes, para que la gente sepa por qué algo no funciona en vez de adivinarlo.