Feedback
Breve aclaración flotante que aparece sobre un elemento al pasar el cursor por encima o al darle el foco.
<vadavo-tooltip> envuelve el elemento disparador; el texto de la aclaración va en el atributo text. El tooltip aparece centrado encima del disparador, con una flecha apuntando hacia él.
Si el disparador es un elemento enfocable, como un button, el tooltip también se muestra al navegar con teclado.
El tooltip se muestra al pasar el cursor por el botón, o al darle el foco con el teclado.
<vadavo-tooltip text="La renovación amplía tu dominio un año más.">
<button class="button secondary">Renovar dominio</button>
</vadavo-tooltip>El disparador puede ser cualquier contenido en línea, como un fragmento de texto.
<vadavo-tooltip text="Un registro DNS asocia tu dominio con la IP del servidor.">
registro DNS
</vadavo-tooltip>Arriba es la posición por defecto. El atributo placement, con valor below o side, se usa cuando no hay sitio arriba o el disparador está en línea con texto.
<vadavo-tooltip placement="below" text="Se muestra debajo del disparador.">
<button class="button secondary">Abajo</button>
</vadavo-tooltip>
<vadavo-tooltip placement="side" text="Se muestra a la derecha del disparador.">
<button class="button secondary">Al lado</button>
</vadavo-tooltip>Para una etiqueta de campo o un término técnico, la clase tooltip-help-trigger se usa en el disparador: un círculo de 22px con un área invisible de 46px sensible al puntero a su alrededor, para que sea fácil de alcanzar sin agrandar el círculo visible.
Sin acciones ni enlaces dentro: la burbuja desaparece en cuanto el cursor o el foco abandonan el disparador, así que nada dentro sería alcanzable ni con clic ni con teclado.
Una frase como máximo: el ancho fijo de la burbuja está pensado para una lectura de un vistazo, no para párrafos — si el contenido crece, es señal de que ha dejado de encajar como tooltip.
Nunca información imprescindible: es un extra, no el único sitio donde vive el dato.
<label>
Periodo de facturación
<vadavo-tooltip text="El anual incluye 2 meses gratis frente al mensual.">
<span class="tooltip-help-trigger" tabindex="0">?</span>
</vadavo-tooltip>
</label>| Token | Qué es |
|---|---|
--tooltip--radius--content | El radio de borde del globo del tooltip. |
--tooltip--shadow--content | La sombra del globo del tooltip. |