Información sobre herramientas
Documentación y ejemplos para agregar información sobre herramientas de Bootstrap personalizada con CSS y JavaScript usando CSS3 para animaciones y atributos de datos para el almacenamiento local de títulos.
Cosas que debe saber al usar el complemento de información sobre herramientas:
- La información sobre herramientas se basa en la biblioteca de terceros Popper.js para el posicionamiento. Debe incluir popper.min.js antes de bootstrap.js o usar
bootstrap.bundle.min.js
/bootstrap.bundle.js
que contiene Popper.js para que funcione la información sobre herramientas. - Si está compilando nuestro JavaScript desde la fuente, requiere
util.js
. - La información sobre herramientas está habilitada por motivos de rendimiento, por lo que debe inicializarla usted mismo .
- La información sobre herramientas con títulos de longitud cero nunca se muestra.
- Especifique
container: 'body'
para evitar problemas de representación en componentes más complejos (como nuestros grupos de entrada, grupos de botones, etc.). - La activación de información sobre herramientas en elementos ocultos no funcionará.
- La información sobre herramientas para los elementos
.disabled
odisabled
debe activarse en un elemento contenedor. - Cuando se activa desde hipervínculos que abarcan varias líneas, la información sobre herramientas se centrará. Úselo
white-space: nowrap;
en su<a>
s para evitar este comportamiento. - La información sobre herramientas debe ocultarse antes de que sus elementos correspondientes se eliminen del DOM.
¿Tienes todo eso? Genial, veamos cómo funcionan con algunos ejemplos.
Una forma de inicializar toda la información sobre herramientas en una página sería seleccionarla por su data-toggle
atributo:
Pase el cursor sobre los enlaces a continuación para ver información sobre herramientas:
Pantalones ajustados al siguiente nivel keffiyeh , probablemente no hayas oído hablar de ellos. Bolso bandolera vegano tipo fotomatón con barba en denim crudo stumptown. El seitán de la granja a la mesa, la ropa americana de 8 bits de quinoa sostenible fixie de mcsweeney tiene un cambray de vinilo terry richardson. Beard stumptown, cárdigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, cuatro loko mcsweeney's cleanse vegan chambray. Un artesano realmente irónico sea cual sea el keytar , scenester de la granja a la mesa .
Pase el cursor sobre los botones a continuación para ver las cuatro direcciones de información sobre herramientas: arriba, derecha, abajo e izquierda.
Y con HTML personalizado agregado:
El complemento de información sobre herramientas genera contenido y marcado a pedido y, de forma predeterminada, coloca información sobre herramientas después de su elemento desencadenante.
Active la información sobre herramientas a través de JavaScript:
El marcado requerido para una información sobre herramientas es solo un data
atributo y title
en el elemento HTML que desea tener una información sobre herramientas. El marcado generado de una información sobre herramientas es bastante simple, aunque requiere una posición (de forma predeterminada, establecida top
por el complemento).
Hacer que la información sobre herramientas funcione para los usuarios de teclados y tecnología de asistencia
Solo debe agregar información sobre herramientas a los elementos HTML que tradicionalmente se pueden enfocar con el teclado y son interactivos (como enlaces o controles de formulario). Aunque los elementos HTML arbitrarios (como <span>
s) se pueden enfocar agregando el tabindex="0"
atributo, esto agregará tabulaciones potencialmente molestas y confusas en elementos no interactivos para los usuarios de teclado. Además, la mayoría de las tecnologías de asistencia actualmente no anuncian la información sobre herramientas en esta situación.
Además, no confíe únicamente en hover
el activador de la información sobre herramientas, ya que esto hará que la información sobre herramientas sea imposible de activar para los usuarios del teclado.
Los elementos con el disabled
atributo no son interactivos, lo que significa que los usuarios no pueden enfocarlos, desplazarlos o hacer clic en ellos para activar una información sobre herramientas (o una ventana emergente). Como solución alternativa, querrá activar la información sobre herramientas desde un contenedor <div>
o <span>
, idealmente enfocable con el teclado usando tabindex="0"
, y anular el pointer-events
elemento deshabilitado.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-
, como en data-animation=""
.
Nombre | Escribe | Defecto | Descripción |
---|---|---|---|
animación | booleano | verdadero | Aplicar una transición de fundido CSS a la información sobre herramientas |
envase | cadena | elemento | falso | falso | Agrega la información sobre herramientas a un elemento específico. Ejemplo: |
demora | número | objeto | 0 | Retraso en mostrar y ocultar la información sobre herramientas (ms): no se aplica al tipo de disparo manual Si se proporciona un número, la demora se aplica tanto para ocultar/mostrar La estructura del objeto es: |
html | booleano | falso | Permitir HTML en la información sobre herramientas. Si es verdadero, las etiquetas HTML en la información sobre herramientas Use texto si le preocupan los ataques XSS. |
colocación | cadena | función | 'parte superior' | Cómo colocar la información sobre herramientas - automático | parte superior | abajo | izquierda | Correcto. Cuando se usa una función para determinar la ubicación, se llama con el nodo DOM de información sobre herramientas como primer argumento y el nodo DOM del elemento desencadenante como segundo. El |
selector | cadena | falso | falso | Si se proporciona un selector, los objetos de información sobre herramientas se delegarán a los objetivos especificados. En la práctica, esto se usa para permitir que se agreguen popovers al contenido HTML dinámico. Vea esto y un ejemplo informativo . |
modelo | cuerda | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
HTML base para usar al crear la información sobre herramientas. La información sobre herramientas
El elemento contenedor más externo debe tener la |
título | cadena | elemento | función | '' | Valor de título predeterminado si Si se proporciona una función, se llamará con su |
generar | cuerda | 'enfoque flotante' | Cómo se activa la información sobre herramientas: haga clic en | flotar | enfoque | manual. Puede pasar varios disparadores; sepáralos con un espacio.
|
compensar | número | cuerda | 0 | Desplazamiento de la información sobre herramientas en relación con su destino. Para obtener más información, consulte los documentos de compensación de Popper.js . |
ubicación alternativa | cadena | formación | 'dar la vuelta' | Permita especificar qué posición usará Popper en la reserva. Para obtener más información, consulte los documentos de comportamiento de Popper.js. |
Perímetro | cadena | elemento | 'padre de desplazamiento' | Límite de restricción de desbordamiento de la información sobre herramientas. Acepta los valores de 'viewport' , 'window' , 'scrollParent' o una referencia HTMLElement (solo JavaScript). Para obtener más información, consulte los documentos de preventOverflow de Popper.js . |
Atributos de datos para información sobre herramientas individuales
Las opciones para información sobre herramientas individuales se pueden especificar alternativamente mediante el uso de atributos de datos, como se explicó anteriormente.
Transiciones y métodos asíncronos
Todos los métodos de API son asíncronos e inician una transición . Vuelven a la persona que llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará una llamada de método en un componente en transición .
Consulte nuestra documentación de JavaScript para obtener más información.
Adjunta un controlador de información sobre herramientas a una colección de elementos.
Revela la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que se muestre la información sobre herramientas (es decir, antes de shown.bs.tooltip
que ocurra el evento). Esto se considera una activación "manual" de la información sobre herramientas. La información sobre herramientas con títulos de longitud cero nunca se muestra.
Oculta la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que la información sobre herramientas se haya ocultado (es decir, antes de hidden.bs.tooltip
que ocurra el evento). Esto se considera una activación "manual" de la información sobre herramientas.
Alterna la información sobre herramientas de un elemento. Vuelve a la persona que llama antes de que se muestre u oculte la información sobre herramientas (es decir, antes de que ocurra el evento shown.bs.tooltip
o ). hidden.bs.tooltip
Esto se considera una activación "manual" de la información sobre herramientas.
Oculta y destruye la información sobre herramientas de un elemento. La información sobre herramientas que utiliza la delegación (que se crea con la selector
opción ) no se puede destruir individualmente en los elementos desencadenantes descendientes.
Le da a la información sobre herramientas de un elemento la capacidad de mostrarse. La información sobre herramientas está habilitada de forma predeterminada.
Elimina la capacidad de mostrar la información sobre herramientas de un elemento. La información sobre herramientas solo se podrá mostrar si se vuelve a habilitar.
Alterna la capacidad de mostrar u ocultar la información sobre herramientas de un elemento.
Actualiza la posición de la información sobre herramientas de un elemento.
Tipo de evento | Descripción |
---|---|
mostrar.bs.información sobre herramientas | Este evento se activa inmediatamente cuando show se llama al método de instancia. |
se muestra.bs.tooltip | Este evento se activa cuando la información sobre herramientas se hace visible para el usuario (esperará a que se completen las transiciones de CSS). |
ocultar.bs.información sobre herramientas | Este evento se activa inmediatamente cuando hide se llama al método de instancia. |
oculto.bs.tooltip | Este evento se activa cuando la información sobre herramientas ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones de CSS). |
insertado.bs.tooltip | Este evento se activa después del show.bs.tooltip evento cuando la plantilla de información sobre herramientas se ha agregado al DOM. |