HTML + CSSTooltips
Tooltip que se desliza por la barra
Un solo tooltip viaja de botón en botón y cambia de ancho para encajar cada etiqueta.
Ajustes
16px
1x
Código
<div class="uv-ttg" role="toolbar" aria-label="Barra de edición"><button type="button" aria-label="Negrita"><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="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg></button><button type="button" aria-label="Cursiva"><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="M10 5h8M6 19h8M14 5l-4 14"/></svg></button><button type="button" aria-label="Enlace"><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="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg></button><button type="button" aria-label="Insertar imagen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.8"/><path d="M20.5 16l-5-5-8.5 8.5"/></svg></button><button type="button" aria-label="Comentar"><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="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg></button><span class="tt" aria-hidden="true"><span class="in"></span></span></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
Las barras de iconos de los editores necesitan etiquetas, pero un tooltip distinto en cada botón da saltos. Esta barra usa un único tooltip que se desliza hasta el botón señalado o enfocado y ajusta su ancho al de la etiqueta con suavidad, así que recorrer la fila se siente como un solo movimiento continuo. Un detalle cuidado para editores de texto, herramientas de diseño y reproductores.
Las etiquetas salen del aria-label de cada botón, una sola fuente para la accesibilidad y el tooltip, que se oculta al salir de la barra.