Bootstrap sobre herramientas (información sobre herramientas) Reproductor
Cuando se quiere describir un enlace, información sobre herramientas (información sobre herramientas) es muy útil. Información sobre herramientas (información sobre herramientas) plug-in está inspirado enMarco JasonescribiójQuery.tipsytema. Información sobre herramientas (información sobre herramientas) plug-in ha hecho mucho para mejorar, por ejemplo, no depende de la imagen en lugar de utilizar CSS para lograr efectos de animación, utilizando los datos de información de atributos almacenada título.
Si se desea hacer referencia a las características individuales de plug-in, es necesario hacer referencia atooltip.js.O, como Bootstrap general Plugin capítulo mencionado, se puede hacer referencia abootstrap.jso versión comprimida debootstrap.min.js.
uso
Información sobre herramientas (información sobre herramientas) generada plug-contenido y las etiquetas en la demanda, es la descripción por defecto (información sobre herramientas) en la parte posterior de sus elementos activos. Hay dos formas de agregar una información sobre herramientas (información sobre herramientas):
- A través de los datos de atributos: Para agregar una información sobre herramientas (información sobre herramientas), sólo tiene que añadir datos de palanca = "información sobre herramientas"para ser una etiqueta de anclaje. El título es el texto de sugerencia de anclaje (información sobre herramientas). De forma predeterminada, la información de herramienta plug-in (información sobre herramientas) se fija en la parte superior.
<a href="#" data-toggle="tooltip" title="Example tooltip"> por favor, coloque por encima de mí </a>
- Por JavaScript: JavaScript noestá activado por información sobre herramientas (información sobre herramientas):
$ ( '# Identificador'). Tooltip (opciones)
$ (Function () {$ ( "[datos de palanca = 'tooltip']") información sobre herramientas () ;.});
Ejemplos
El siguiente ejemplo muestra el uso de consejos tool widget (información sobre herramientas) por los datos de atributo de uso.
Ejemplos
<H4> herramienta rápida (información sobre herramientas) plug - anclaje </ h4> Este es un <a href = "#" class = "información sobre herramientas-test" datos de palanca = "tooltip"
title = "Información sobre la herramienta por defecto"> Información sobre la herramienta por defecto </ a>. Se trata de un <a href = "#" class = "información sobre herramientas-test" datos de palanca = "tooltip"
técnica de colocación = "left" title = Información sobre la herramienta "Información sobre la herramienta en el lado izquierdo"> en el lado izquierdo </ a>. Se trata de un <a href = "#" datos de palanca = "tooltip" técnica de colocación = "top"
title = "Información sobre la herramienta top"> Información sobre la herramienta superior </ a>. Se trata de un <a href = "#" datos de palanca = "tooltip" técnica de colocación = "inferior"
title = "Información sobre la herramienta inferior"> Información sobre la herramienta inferior </ a>. Se trata de un <a href = "#" datos de palanca = "tooltip" técnica de colocación = "right"
title = "Información sobre la herramienta lado derecho"> a la derecha Tooltip lado </ a>
<Br>
<H4> herramienta rápida (información sobre herramientas) Widget - botón </ h4>
<Botón type = "button" class = "btn btn-default" datos de palanca = "tooltip"
title = "Información sobre la herramienta por defecto"> Información sobre la herramienta por defecto </ botón>
<Botón type = "button" class = "btn btn-default" datos de palanca = "tooltip"
técnica de colocación = "left" title = "Información sobre la herramienta en el lado izquierdo"> Descripción emergente en el lado izquierdo </ botón>
<Botón type = "button" class = "btn btn-default" datos de palanca = "tooltip"
técnica de colocación = "top" title = "Información sobre la herramienta top"> Información sobre la herramienta superior </ botón>
<Botón type = "button" class = "btn btn-default" datos de palanca = "tooltip"
técnica de colocación = "inferior" title = "Información sobre la herramienta inferior"> Descripción emergente en la parte inferior </ botón>
<Botón type = "button" class = "btn btn-default" datos de palanca = "tooltip"
técnica de colocación = "right" title = "Información sobre la herramienta lado derecho"> a la derecha Tooltip lado </ botón>
<Script> $ (function () {$ ( "[Datos de palanca = 'tooltip']") información sobre herramientas () ;.}); </ script>
Trate »
Los resultados son los siguientes:
opciones
Hay algunas opciones a través del API de datos de rutina de carga (Bootstrap API de datos) o mediante la adición de llamada de JavaScript. En la siguiente tabla se muestran las siguientes opciones:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| animation | boolean 默认值：true | data-animation | 提示工具使用 CSS 渐变滤镜效果。 |
| html | boolean 默认值：false | data-html | 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。 |
| placement | string|function 默认值：top | data-placement | 规定如何定位提示工具（即 top|bottom|left|right|auto）。 当指定为auto时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。 |
| selector | string 默认值：false | data-selector | 如果提供了一个选择器，提示工具对象将被委派到指定的目标。 |
| title | string | function 默认值：'' | data-title | 如果未指定title属性，则 title 选项是默认的 title 值。 |
| trigger | string 默认值：'hover focus' | data-trigger | 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。 |
| content | string | function 默认值：'' | data-content | 如果未指定data-content属性，则使用默认的 content 值。 |
| delay | number | object 默认值：0 | data-delay | 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay:
{ show: 500, hide: 100 } |
| container | string | false 默认值：false | data-container | 向指定元素追加提示工具。 实例： container: 'body' |
camino
Éstos son algunos consejos de herramientas (información sobre herramientas) plug-in de maneras útiles:
| 方法 | 描述 | 实例 |
|---|---|---|
| Options:.tooltip(options) | 向元素集合附加提示工具句柄。 |
$().tooltip(options) |
| Toggle:.tooltip('toggle') | 切换显示/隐藏元素的提示工具。 |
$('#element').tooltip('toggle')
|
| Show:.tooltip('show') | 显示元素的提示工具。 |
$('#element').tooltip('show')
|
| Hide:.tooltip('hide') | 隐藏元素的提示工具。 |
$('#element').tooltip('hide')
|
| Destroy:.tooltip('destroy') | 隐藏并销毁元素的提示工具。 |
$('#element').tooltip('destroy')
|
Ejemplos
El siguiente ejemplo muestra la información sobre herramientas (información sobre herramientas) métodos de plug-in de uso.
Ejemplos
<Div style = "padding: 10px 100px 100px ;"> Este es un <a href = "#" class = "información sobre herramientas-show" datos de palanca = "tooltip"
title = "espectáculo"> Descripción emergente método espectáculo </ a>. Se trata de un <a href = "#" class = "información sobre herramientas de piel" datos de palanca = "tooltip"
técnica de colocación = "left" title = "ocultar"> Descripción emergente método de ocultar </ a>. Se trata de un <a href = "#" class = "información sobre herramientas-destruir" datos de palanca = "tooltip"
técnica de colocación = "top" title = "destruir"> Descripción emergente método de destruir </ a>. Se trata de un <a href = "#" class = "información sobre herramientas-toggle" datos de palanca = "tooltip"
técnica de colocación = "inferior" title = "cambiar"> Información sobre la herramienta de palanca método </ a>. <br> <br> <br>
<P class = "información sobre herramientas-opciones" > Este es un <a href = "#" datos de palanca = "tooltip" title = "<h2> 'am header2 </ h2>"> Descripción emergente de opciones del método </ a>. </ p>
<Script>
$ (Function () {$ ( '.tooltip-Show' ) información sobre herramientas ( 'show') ;.}); $ (function () {$ ( '.tooltip-Hide' ) información sobre herramientas ( 'ocultar') ;.}); $ (function () {$ ( '.tooltip-Destruye' ) información sobre herramientas ( 'destruir') ;.}); $ (function () {$ ( '.tooltip-Alternar' ) información sobre herramientas ( 'alternar') ;.}); $ (function () . {$ ( ".tooltip-Options a") información sobre herramientas ({html: true });});
</ Script>
<Div>
Trate »
Los resultados son los siguientes:
evento
La siguiente tabla muestra la información sobre herramientas (información sobre herramientas) plug-in para ser utilizado en el evento. Estos eventos se pueden utilizar cuando la función de enlace.
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.tooltip | 当调用 show 实例方法时立即触发该事件。 |
$('#myTooltip').on('show.bs.tooltip', function () {
// 执行一些动作...
})
|
| shown.bs.tooltip | 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 |
$('#myTooltip').on('shown.bs.tooltip', function () {
// 执行一些动作...
})
|
| hide.bs.tooltip | 当调用 hide 实例方法时立即触发该事件。 |
$('#myTooltip').on('hide.bs.tooltip', function () {
// 执行一些动作...
})
|
| hidden.bs.tooltip | 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// 执行一些动作...
})
|
Ejemplos
El siguiente ejemplo muestra la información sobre herramientas (información sobre herramientas) plug-in de uso evento.
Ejemplos
<H4> herramienta rápida (información sobre herramientas) plug - anclaje </ h4> Este es un <a href = "#" class = "información sobre herramientas-show" datos de palanca = "tooltip"
title = "Información sobre la herramienta por defecto"> Información sobre la herramienta por defecto </ a>. <script >
$ (Function () {$ ( '.tooltip-Show' ) información sobre herramientas ( 'show') ;.}); $ (function () {$ ( '.tooltip-Show' ). En ( 'show.bs.tooltip', function () {
alert ( "Mensaje de alerta en el programa" );})
});
</ Script>
Trate »
Los resultados son los siguientes:
