JS Información sobre la herramienta (tooltip.js)
El plug-in Tooltip es pequeño cuadro emergente que aparece cuando el usuario mueve el puntero del ratón sobre un elemento.
Para ver un tutorial sobre la información de herramientas, lea nuestra Bootstrap Tooltip Tutorial .
Via data-* Atributos
El data-toggle="tooltip" activa la información sobre herramientas.
El title atributo especifica el texto que se debe mostrar dentro de la información de herramientas.
a través de JavaScript
La información sobre herramientas no son plugins CSS-solamente, y por lo tanto deben ser inicializadas con jQuery: seleccionar el elemento especificado y llame a la tooltip() método.
Ejemplo
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Inténtalo tú mismo " Opciones tooltip
Las opciones pueden ser transmitidos a través de los atributos de datos o JavaScript. Para los atributos, al añadir el nombre de opción de data- , como en la data-placement="" .
| Nombre | Tipo | Defecto | Descripción | Intentalo |
|---|---|---|---|---|
| animation | boolean | true | Especifica si se debe añadir un efecto de transición de fundido CSS al mostrar y ocultar la información sobre herramientas
| Intentalo |
| envase | cadena, o el falso booleano | falso | Añade la información de herramienta a un elemento específico. Ejemplo: Envase: 'body' | Intentalo |
| delay | number, or object | 0 | Especifica el número de milisegundos que se necesita para mostrar y ocultar la información sobre herramientas. Para especificar un retardo para mostrar y otro para esconderse, utilizar la estructura del objeto: delay: {show: 500, hide: 100} - que se llevará a 500 ms para mostrar la tooltip , pero sólo 100 ms de ocultarlo | Intentalo |
| html | boolean | false | Especifica si acepta etiquetas HTML en la descripción:
Cuando se establece en false (predeterminado), jQuery's text() se utiliza el método. Utilice esta opción si está preocupado por los ataques XSS | Intentalo |
| placement | string | "top" | Especifica la posición sobre herramientas. Valores posibles:
| Intentalo |
| selector | string, or the boolean false | false | Agrega la información sobre herramientas a un selector especificado | Intentalo |
| template | string | HTML base utilizada para crear la información de herramientas. El título de la información de herramienta se inserta en el elemento que tiene la clase .tooltip-inner y el elemento con la clase .tooltip-arrow se convertirá en la flecha de la información sobre herramientas. El elemento de envoltura más externa debe tener la .tooltip clase. | ||
| title | string | "" | Especifica el texto que se debe mostrar en el globito | Intentalo |
| trigger | string | "hover focus" | Especifica cómo se activa la información sobre herramientas. Valores posibles:
| Intentalo |
| viewport | string, or object | {selector: "body", padding: 0} | Mantiene la información de herramientas dentro de los límites de este elemento. Ejemplo: viewport: '#viewport' o {selector: '#viewport', padding: 0} |
Métodos tooltip
En la siguiente tabla se enumeran los métodos de información sobre herramientas disponibles.
| Método | Descripción | Intentalo |
|---|---|---|
| .tooltip( options ) | Activa la información de herramientas con una opción. Ver opciones anteriores para valores válidos | Intentalo |
| .tooltip("show") | Muestra la información de herramientas | Intentalo |
| .tooltip("hide") | Oculta la información sobre herramientas | Intentalo |
| .tooltip("toggle") | Alterna la información sobre herramientas | Intentalo |
| .tooltip("destroy") | Oculta y destruye la información sobre herramientas | Intentalo |
Eventos tooltip
En la siguiente tabla se enumeran los eventos de información sobre herramientas disponibles.
| Evento | Descripción | Intentalo |
|---|---|---|
| show.bs.tooltip | Se produce cuando la información de herramienta está a punto de ser mostrado | Intentalo |
| shown.bs.tooltip | Se produce cuando la información sobre herramientas se muestra totalmente (después de las transiciones CSS han completado) | Intentalo |
| hide.bs.tooltip | Se produce cuando la información de herramienta está a punto de ser ocultado | Intentalo |
| hidden.bs.tooltip | Se produce cuando la información de herramienta está completamente oculto (después de las transiciones CSS han completado) | Intentalo |
Ejemplos
Diseño herramientas personalizadas
Usar CSS para personalizar el aspecto de la descripción:
Ejemplo
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
} Inténtalo tú mismo "