Bootstrap Plugin de Tooltip
Cuando desea describir un enlace, el Tooltip es muy útil. El plugin de Tooltip está inspirado enJason Frameescrito porjQuery.tipsyla inspiración. El plugin de Tooltip ha realizado muchas mejoras, por ejemplo, no necesita depender de imágenes, sino que usa CSS para efectos de animación, y usa atributos data para almacenar la información del título.
Si desea citar la funcionalidad de este plugin por separado, necesita citartooltip.js. O, como se menciona enDescripción general de los plugins de Bootstrapen el capítulo, puede citarbootstrap.jso la versión comprimida debootstrap.min.js。
Uso
El plugin de Tooltip genera contenido y marcado según sea necesario; por defecto, coloca el tooltip después de su elemento disparador. Puede agregar un tooltip de las siguientes dos maneras:
- Mediante el atributo data: Para agregar un tooltip, simplemente añada a una etiqueta de ancladata-toggle="tooltip"El title del ancla es el texto del tooltip. Por defecto, el plugin coloca el tooltip en la parte superior.
<a href="../index.html" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
- Mediante JavaScript: Active el tooltip mediante JavaScript:
$('#identifier').tooltip(options)
El plugin de Tooltip, a diferencia de los plugins de menú desplegable y otros discutidos anteriormente, no es un plugin puramente CSS. Para usar este plugin, debe activarlo con jQuery (lea javascript). Use el siguiente script para habilitar todos los tooltips en la página:
$(function () { $("[data-toggle='tooltip']").tooltip(); });
Ejemplo
El siguiente ejemplo demuestra el uso del plugin de Tooltip mediante el atributo data.
Ejemplo
<h4>Plugin de Tooltip - Ancla</h4>Esto es un<a href="#" class="tooltip-test" data-toggle="tooltip"
title="Tooltip predeterminado">Tooltip predeterminado</a>. Esto es un<a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="Tooltip a la izquierda">Tooltip a la izquierda</a>. Esto es un<a href="#" data-toggle="tooltip" data-placement="top"
title="Tooltip superior">Tooltip superior</a>. Esto es un<a href="#" data-toggle="tooltip" data-placement="bottom"
title="Tooltip inferior">Tooltip inferior</a>. Esto es un<a href="#" data-toggle="tooltip" data-placement="right"
title="Tooltip a la derecha">Tooltip a la derecha</a>
<br>
<h4>Plugin de Tooltip - Botón</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="Tooltip predeterminado">Tooltip predeterminado</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="Tooltip a la izquierda">Tooltip a la izquierda</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="Tooltip superior">Tooltip superior</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="Tooltip inferior">Tooltip inferior</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="Tooltip a la derecha">Tooltip a la derecha</button>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
Pruébalo »
El resultado se muestra a continuación:
Opciones
Algunas opciones se agregan a través de la API de datos de Bootstrap (Bootstrap Data API) o se invocan mediante JavaScript. La siguiente tabla enumera estas opciones:
| Nombre de la opción | Tipo / Valor predeterminado | Nombre del atributo Data | Descripción |
|---|---|---|---|
| animation | boolean Valor predeterminado: true | data-animation | El tooltip utiliza filtros de degradado CSS. |
| html | boolean Valor predeterminado: false | data-html | Inserta HTML en el tooltip. Si es false, el método text de jQuery se usará para insertar contenido en el DOM. Si le preocupan los ataques XSS, use text. |
| placement | string|function Valor predeterminado: top | data-placement | Especifica cómo posicionar el tooltip (es decir, top|bottom|left|right|auto). Cuando se especifica comoauto, el tooltip se ajusta dinámicamente. Por ejemplo, si placement es 'auto left', el tooltip se mostrará a la izquierda siempre que sea posible; solo se mostrará a la derecha si las condiciones no lo permiten. |
| selector | string Valor predeterminado: false | data-selector | Si se proporciona un selector, el objeto del tooltip se delegará al objetivo especificado. |
| title | string | function Valor predeterminado: '' | data-title | Si no se especificatitleel atributo, la opción title es el valor de title predeterminado. |
| trigger | string Valor predeterminado: 'hover focus' | data-trigger | Define cómo se activa el tooltip: click| hover | focus | manual. Puede pasar varios activadores, separados por espacios. |
| delay | number | object Valor predeterminado: 0 | data-delay | Número de milisegundos para retrasar la visualización y ocultación del tooltip - no aplica al tipo de activación manual. Si se proporciona un número, el retraso se aplicará a mostrar y ocultar. Si se proporciona un objeto, la estructura es la siguiente:
delay:
{ show: 500, hide: 100 } |
| container | string | false Valor predeterminado: false | data-container | Añade el tooltip al elemento especificado. Ejemplo: container: 'body' |
Métodos
A continuación se presentan algunos métodos útiles del plugin de Tooltip:
| Método | Descripción | Ejemplo |
|---|---|---|
| Options: .tooltip(options) | Adjunta el manejador del tooltip a la colección de elementos. |
$().tooltip(options) |
| Toggle: .tooltip('toggle') | Alterna mostrar/ocultar el tooltip del elemento. |
$('#element').tooltip('toggle')
|
| Show: .tooltip('show') | Muestra el tooltip del elemento. |
$('#element').tooltip('show')
|
| Hide: .tooltip('hide') | Oculta el tooltip del elemento. |
$('#element').tooltip('hide')
|
| Destroy: .tooltip('destroy') | Oculta y destruye el tooltip del elemento. |
$('#element').tooltip('destroy')
|
Ejemplo
El siguiente ejemplo demuestra el uso de los métodos del plugin de Tooltip.
Ejemplo
<div style="padding: 100px 100px 10px;">Esto es un<a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Método de Tooltip: show</a>. Esto es un<a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Método de Tooltip: hide</a>. Esto es un<a href="#" class="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Método de Tooltip: destroy</a>. Esto es un<a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Método de Tooltip: toggle</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >Esto es un<a href="#" data-toggle="tooltip" title="<h2>'am Header2
</h2>">Método de Tooltip: options</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });
});
</script>
</div>
Pruébalo »
El resultado se muestra a continuación:
Eventos
La siguiente tabla enumera los eventos utilizados en el plugin de Tooltip. Estos eventos se pueden usar como enlaces (hooks) en las funciones.
| Evento | Descripción | Ejemplo |
|---|---|---|
| show.bs.tooltip | Este evento se dispara inmediatamente cuando se llama al método de instancia show. |
$('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...
})
|
| shown.bs.tooltip | Este evento se dispara cuando el tooltip es visible para el usuario (esperará a que se complete la transición CSS). |
$('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...
})
|
| hide.bs.tooltip | Este evento se dispara inmediatamente cuando se llama al método de instancia hide. |
$('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作...
})
|
| hidden.bs.tooltip | Este evento se dispara cuando el tooltip está oculto para el usuario (esperará a que se complete la transición CSS). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
})
|
Ejemplo
El siguiente ejemplo demuestra el uso de los eventos del plugin de Tooltip.
Ejemplo
<h4>Plugin de Tooltip - Ancla</h4>Esto es un<a href="#" class="tooltip-show" data-toggle="tooltip"
title="Tooltip predeterminado">Tooltip predeterminado</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})
});
</script>
Pruébalo »
El resultado se muestra a continuación:
