Información sobre herramientas de Bootstrap JS
Información sobre herramientas de JS
La información sobre herramientas es un pequeño cuadro emergente que aparece cuando el usuario mueve el puntero del mouse sobre un elemento.
Para obtener un tutorial sobre información sobre herramientas, lea nuestro Tutorial de información sobre herramientas de Bootstrap .
A través de datos-* Atributos
data-toggle="tooltip"activa la información sobre herramientas .
El titleatributo especifica el texto que debe mostrarse dentro de la información sobre herramientas.
Ejemplo
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
A través de JavaScript
La información sobre herramientas no son complementos solo de CSS y, por lo tanto, deben inicializarse con jQuery: seleccione el elemento especificado y llame al tooltip()método.
Ejemplo
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Opciones de información sobre herramientas
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-placement="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip
|
|
| container | string, or the boolean false | false | Appends the tooltip to a specific element. Example: container: 'body' |
|
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to show and hide the tooltip. To specify a delay for showing and another one for hiding, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to show the tooltip, but only 100 ms to hide it |
|
| html | boolean | false | Specifies whether to accept HTML tags in the tooltip:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
|
| placement | string | "top" | Specifies the tooltip position. Possible values:
|
|
| selector | string, or the boolean false | false | Adds the tooltip to a specified selector | |
| template | string | Base HTML to use when creating the tooltip. The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class. |
||
| title | string | "" | Specifies the text that should be displayed inside the tooltip | |
| trigger | string | "hover focus" | Specifies how the tooltip is triggered. Possible values:
|
|
| offset | number or a string | 0 | Offset of the tooltip relative to its target | |
| fallbackPlacement | string or an aray | "flip" | Specifies which position Popper wil use on fallback | |
| boundary | string or element | "scrollParent" | Overflow constraint boundary of the tooltip. Accepts the values "viewport", "window" or "scrollParent", or an HTML element |
Métodos de información sobre herramientas
La siguiente tabla enumera todos los métodos de información sobre herramientas disponibles.
| Method | Description | Try it |
|---|---|---|
| .tooltip(options) | Activates the tooltip with an option. See options above for valid values | |
| .tooltip("show") | Shows the tooltip | |
| .tooltip("hide") | Hides the tooltip | |
| .tooltip("toggle") | Toggles the tooltip | |
| .tooltip("dispose") | Hides and destroys the tooltip |
Eventos de información sobre herramientas
La siguiente tabla enumera todos los eventos de información sobre herramientas disponibles.
| Event | Description | Try it |
|---|---|---|
| show.bs.tooltip | Occurs when the tooltip is about to be shown | |
| shown.bs.tooltip | Occurs when the tooltip is fully shown (after CSS transitions have completed) | |
| hide.bs.tooltip | Occurs when the tooltip is about to be hidden | |
| hidden.bs.tooltip | Occurs when the tooltip is fully hidden (after CSS transitions have completed) |