Las información sobre herramientas son muy útiles cuando desea describir un enlace. ToolTip Plugin está inspirado en jQuery.tipsy escrito por Jason Frame. El complemento ToolTip ha realizado muchas mejoras, como no confiar en las imágenes, sino usar CSS para lograr efectos de animación y usar atributos de datos para almacenar información del título.
Si desea hacer referencia a la funcionalidad del complemento por separado, debe hacer referencia a ToolTip.js. O, como se menciona en el capítulo de descripción general del complemento Bootstrap, puede consultar bootstrap.js o versiones comprimidas de bootstrap.min.js.
1. Uso
Los complementos de información sobre herramientas generan contenido y etiquetas según los requisitos. Por defecto, las información sobre herramientas se colocan detrás de sus elementos de activación. Hay dos formas en que puede agregar información sobre herramientas:
1. A través del atributo de datos: si necesita agregar una información sobre herramientas, simplemente agregue Data-Toggle = "ToolTiP" a una etiqueta de anclaje. El título del ancla es el texto de la información sobre herramientas. Por defecto, el complemento establece la información sobre herramientas en la parte superior.
<a href = "#" data-toggle = "tooltip"> Por favor, pasee sobre mí </a>
2. A través de JavaScript: Trigger ToolTiP (ToolTiP) a través de JavaScript:
$ ('#identificador'). ToolTip (Opciones)El complemento ToolTip no es como los menús desplegables y otros complementos discutidos anteriormente, no es un complemento CSS puro. Para usar el complemento, debe activarlo usando jQuery (leer JavaScript). Use el siguiente script para habilitar todas las comidas herramientas en la página:
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip ();});2. Opciones
Hay algunas opciones que se agregan a través de la API de datos de Bootstrap (API de datos Bootstrap) o se llaman a través de JavaScript. La siguiente tabla enumera estas opciones:
tres. Servicio de herramientas
// Ejemplo básico <a href = "#" data-toggle = "tooltip"> html5 </a> // La parte js debe declarar $ ('#section'). Tooltip ();Las información sobre herramientas tienen muchas propiedades para configurar la visualización de indicaciones, de la siguiente manera:
<a href = "#" rel = "tooltip" data-toggle = "tooltip" data-animation = "false" data-html = "true" data-placation = "auto" data-selector = "a [rel = tooltip]" data-trigger = "click" data-delay = "500"-Template = "<b> 123 </b>"> html5 </a-
Simplemente elimine los datos anteriores en JavaScript. Incluyendo: animación, html, colocación, selector, título original, título, disparador, retraso, contenedor y plantilla y otras propiedades.
// Método JavaScript $ ('#Sección A'). ToolTip ({Delay: {Show: 500, Ocultar: 100,}, Container: 'Body'});Hay cuatro métodos para JavaScript: mostrar, esconderse, alternar y destruir.
// show $ ('#section a'). Tooltip ('show'); // ocultar $ ('#sección A'). ToolTip ('Hide'); // Invertir show y ocultar $ ('#sección A'). ToolTip ('Toggle'); // Hide and Destroy $ ('#Sección A'). Tooltip ('destruir');Hay cuatro tipos de eventos en la información sobre herramientas.
// eventos, otras similitudes
$ ('#select A'). on ('show.bs.tooltip', function () {alert ('gratis cuando se llama el programa!');});Esta serie de tutoriales se ha compilado en: Tutoriales básicos de Bootstrap Temas especiales, bienvenidos a Click To Learn.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.