Tooltip de confirmación al copiar
Pulsa el botón y aparece una burbuja verde de «Copiado» mientras el check se dibuja solo.
Ajustes
Código
<button class="uv-tconfirm">Copiar enlace<span><svg viewBox="0 0 24 24"><path d="m5 12 4 4 10-10" pathLength="1"/></svg>Copiado</span></button>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
Dónde usarlo
Copiar algo no da ninguna señal por sí mismo, y la gente acaba pulsando dos veces por si acaso. Úsalo en el enlace de invitación de un planificador de viajes compartido, en el código de referido de una app de suscripción o en el «Copiar enlace» de una oferta de empleo. Un tooltip de copiado en HTML y CSS.
La burbuja solo muestra la confirmación; para copiar de verdad hace falta una línea de JavaScript con la API del portapapeles. Enséñala únicamente cuando la copia haya funcionado. Se queda mientras el botón tiene el foco y se cierra al pulsar fuera.