Envío gratis a partir de 40 €Pedidos antes de las 18:00 salen hoy. Devolución gratis en 30 días.
HTML + CSSTooltips
Tooltip que se despliega en 3D
El tooltip se abre como un papel doblado: primero la cabecera y después el cuerpo, en 3D.
Ajustes
16px
1x
Código
<span class="uv-tuf"><button type="button" aria-describedby="uv-tuf-t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg>Envío</button><span class="tt" role="tooltip" id="uv-tuf-t"><span class="p1">Envío gratis a partir de 40 €</span><span class="p2">Pedidos antes de las 18:00 salen hoy. Devolución gratis en 30 días.</span></span></span>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 alternativa divertida a los tooltips que aparecen con fundido para datos de envío, promociones o notas de producto. La burbuja son dos paneles unidos por una bisagra: al pasar o enfocar, la cabecera gira hasta su sitio y un instante después el cuerpo se despliega hacia abajo, los dos con una sombra que se aclara al abrirse, como un papel que se desdobla delante de ti.
Al cerrarse, la secuencia va al revés. El tooltip se enlaza al botón con aria-describedby y el titular se edita con el control de texto.