HTML + CSSTooltips

Tooltip lateral elástico

Sale a la derecha del icono con un pequeño tallo que se estira y lo une al botón.

Ajustes

16px
1x

Código

<button class="uv-tl">↗<span>Compartir enlace</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

Los tooltips laterales son para diseños en vertical: la barra de iconos plegada de un CRM o la barra flotante para compartir junto a un artículo del blog. Encima de los iconos taparían al vecino; de lado quedan despejados. El tallo le da a este tooltip CSS un tirón elástico al abrirse.

Se abre hacia la derecha, así que resérvalo para barras pegadas al borde izquierdo; en un panel a la derecha, dale la vuelta. El tallo usa tu primer color, y un tono apagado evita que parezca una flecha señalando otra cosa.