Descripciones emergentes
Las descripciones emergentes son mensajes informativos que aparecen cuando el usuario interactúa con un elemento de la interfaz, para ofrecer información adicional relacionada que no es esencial para el uso del componente.
Descripción emergente
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item">
<label for="input-id"><button class="ulpgcds-tooltip" data-simpletooltip-text="Texto de prueba en tooltip" role="tooltip">Ayuda<span class="ulpgcds-icon ulpgcds-icon-info ulpgcds-icon--right"></span></button></label>
<input type="text" id="input-id" />
</div>
</form> Uso del componente
La descripción emergente debe aparecer al pasar el ratón sobre el elemento al que este asignado con un retardo de, al menos, 1 segundo para asegurarse de que la intención del usuario es leer esta descripción.
En dispositivos de interacción táctil, se debería evitar mostrar este componente en elemento que tengan una interacción definida (por ejemplo, los botones nunca deberían tener una descripción emergente en estos dispositivos).
Evitar en la medida de lo posible descripciones largas:
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-tooltip | Activa la funcionalidad de tooltip al pasar por encima del botón |
Accesibilidad
Este componente hace uso de una funcionalidad específica para cubrir los aspectos de accesibilidad.
Para ello, se ha partido del componente desarrollado en van11y.net