HTML + CSSTooltips
Tooltip dividido
Dos mitades de color entran por los lados y se unen para formar el tooltip debajo del botón.
Ajustes
16px
1x
Código
<button class="uv-ts">Copiar<span><i></i>Contenido 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
Queda bien en botones de copiar con algo de carácter, como el código de descuento del banner de una tienda online o el cupón al final de una newsletter. Los dos colores salen de tu paleta, así que el tooltip parece de tu marca y no la típica etiqueta negra. Este tooltip en CSS se abre debajo del botón.
Elige dos colores con buen contraste frente al texto, porque el mensaje va justo encima. Si los de tu marca son muy claros, oscurécelos un punto. Y mensajes cortos: las mitades se cierran mejor alrededor de dos o tres palabras.