English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de Bootstrap

Complementos Bootstrap

Complemento de sugerencia (Tooltip) de Bootstrap

cuando desea describir un enlace, la sugerencia (Tooltip) resulta muy útil. El complemento de sugerencia (Tooltip) de Bootstrap está inspirado en Jason Frame escrito por jQuery.tipsy la inspiración. El complemento de sugerencia (Tooltip) ha mejorado mucho, por ejemplo, en lugar de depender de imágenes, utiliza CSS para implementar efectos de animación y almacena la información del título en atributos de datos.

si desea usar funcionalidades específicas del complemento, debe referirse a tooltip.jso, como Vista general de complementos Bootstrap como se mencionó en el capítulo anterior, puede referirse a bootstrap.js o la versión comprimida bootstrap.min.js.

Uso

El complemento de sugerencia (Tooltip) crea contenido y etiquetas según las necesidades, por defecto coloca la sugerencia (tooltip) detrás de los elementos desencadenantes. Puede agregar sugerencias (tooltip) de las siguientes dos formas:

  • a través de la propiedad data: Para agregar un Tooltip, simplemente agregue data-toggle="tooltip" . El texto del Tooltip es el título del ancla. Por defecto, el plugin coloca el Tooltip en la parte superior.

    <a　href="#"　data-toggle="tooltip" title="Tooltip de ejemplo">Haga hover sobre mí</a>

  • : A través de JavaScript: Disparar el Tooltip mediante JavaScript:

    $('#identifier').tooltip(options)

El plugin de Tooltip (Tooltip) no es un plugin puramente CSS como se discutió anteriormente, menús desplegables y otros plugins. Para usar este plugin, debe activarlo con jquery (lectura de javascript). Utilice el siguiente script para activar todos los Tooltip en la página:

$(function　()　{　$("[data-toggle='tooltip']").tooltip();　});

Ejemplo en línea

A continuación, se muestra un ejemplo de cómo se utiliza el plugin de Tooltip (Tooltip) a través de la propiedad data.

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Ejemplo Bootstrap　-　plugin de Tooltip (Tooltip)/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Plugin de Tooltips (Tooltip)　-　ánclade</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 izquierdo">Tooltip izquierdo</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 Tooltips (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 izquierdo">Tooltip izquierdo
</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>
</body>
</html>
Verifique aquí ‹/›

Los resultados se muestran a continuación:

Opciones

Algunas opciones se agregan a través de la API de datos de Bootstrap (Bootstrap Data API) o se llaman mediante JavaScript. La siguiente tabla enumera estas opciones:

Nombre de la opciónTipo/Valor predeterminadoNombre de la propiedad de datosDescripción
animationboolean
Valor predeterminado: true		data-animationLa herramienta de sugerencias utiliza efectos de filtro de desvanecimiento CSS.
htmlboolean
Valor predeterminado: false		data-htmlInsertar HTML en la herramienta de sugerencias. Si es false, se usará el método text de jQuery para insertar contenido en el DOM. Si está preocupado por los ataques XSS, utilice text.
placementstring|function
Valor predeterminado: top		data-placementEspecificar cómo ubicar la herramienta de sugerencias (es decir, top|bottom|left|right|auto).
Cuando se especifica auto En ese caso, ajusta dinámicamente la herramienta de sugerencias. Por ejemplo, si placement es "auto left", la herramienta de sugerencias se mostrará en la izquierda siempre que sea posible, y en caso de que no sea posible, se mostrará en la derecha.
selectorstring
Valor predeterminado: false		data-selectorSi se proporciona un selector, el objeto de herramienta de sugerencias se delega al objetivo especificado.
titlestring | function
Valor predeterminado: ''		data-titleSi no se especifica title Si no se especifica la propiedad, el valor predeterminado de title es el valor por defecto de title.
triggerstring
Valor predeterminado: 'hover focus'		data-triggerDefinir cómo activar la herramienta de sugerencias: click| hover | focus | manualPuede pasar varios desencadenadores, separados por espacio.
delaynumber | object
Valor predeterminado: 0		data-delayMilisegundos de retraso para mostrar y ocultar la herramienta de sugerencias. - No se aplica a la tipo de activación manual. Si se proporciona un número, el retraso se aplicará a la visualización y ocultación. Si se proporciona un objeto, la estructura es la siguiente:
delay:
{　show:　500,　hide:　100　}
containerstring | false
Valor predeterminado: false		data-containerAñadir una herramienta de sugerencias a un elemento específico.
Ejemplo: container: 'body'

Métodos

A continuación se presentan algunos métodos útiles para el complemento de herramientas de sugerencias (Tooltip):

MétodosDescripciónEjemplo
Opciones: .tooltip(options)Añadir un manejador de herramientas de sugerencias a la colección de elementos.
$().tooltip(opciones)
Toggle: .tooltip('toggle')Cambiar el estado de visualización/Ocultar el tooltip del elemento.
$('#element').tooltip('toggle')
Show: .tooltip('show')Mostrar el tooltip del elemento.
$('#element').tooltip('show')
Hide: .tooltip('hide')Ocultar el tooltip del elemento.
$('#element').tooltip('hide')
Destroy: .tooltip('destroy')Ocultar y destruir el tooltip del elemento.
$('#element').tooltip('destroy')

Ejemplo en línea

El siguiente ejemplo muestra el uso de los métodos del plugin de tooltip (Tooltip).

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Métodos del plugin de tooltip (Tooltip)/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　style="padding:　100px　100px　10px;">
	Esto es un　
	<a　href="#"　class="tooltip-show"　data-toggle="tooltip"　title="mostrar">Método Tooltip　mostrar</a>.
	Esto es un　
	<a　href="#"　class="tooltip-hide"　data-toggle="tooltip"　data-placement="izquierda"　title="hide">Método Tooltip　hide</a>.
	Esto es un　
	<a　href="#"　class="tooltip-destroy"　data-toggle="tooltip"　data-placement="arriba"　title="destroy">Método Tooltip　destroy</a>.
	Esto es un　
	<a　href="#"　class="tooltip-toggle"　data-toggle="tooltip"　data-placement="abajo"　title="toggle">Método Tooltip　toggle</a>.
	<br><br><br><br><br><br>
	<p　class="tooltip-opciones"　>
		Esto es un　
		<a　href="#"　data-toggle="tooltip"　title="<h2'>encabezado am2　</h2>">Método Tooltip　opciones</a>.
	</p>
	<script>
		$('}})-show').tooltip('show');});
		$('}})-hide').tooltip('hide');});
		$('}})-destroy').tooltip('destroy');});
		$('}})-toggle').tooltip('toggle');});
		$(function　()　{　$(".tooltip-options　a").tooltip({html　:　true　});});
	</script>
</div>
</body>
</html>
Verifique aquí ‹/›

Los resultados se muestran a continuación:

Evento

La siguiente tabla enumera los eventos que se utilizan en el plugin de herramientas de sugerencia (Tooltip). Estos eventos pueden ser utilizados como ganchos en las funciones.

EventoDescripciónEjemplo
show.bs.tooltipEste evento se desencadena inmediatamente cuando se llama al método de ejemplo show.
$('#myTooltip').on('show.bs.tooltip', function () {
　　//　Ejecutar algunas acciones...
}
shown.bs.tooltipEste evento se desencadena cuando la herramienta de sugerencia se hace visible para el usuario (esperando que se complete el efecto de transición CSS).
$('#myTooltip').on('shown.bs.tooltip', function () {
　　//　Ejecutar algunas acciones...
}
hide.bs.tooltipEste evento se desencadena inmediatamente cuando se llama al método de ejemplo hide.
$('#myTooltip').on('hide.bs.tooltip', function () {
　　//　Ejecutar algunas acciones...
}
hidden.bs.tooltipEste evento se desencadena cuando la herramienta de sugerencia se oculta para el usuario (esperando que se complete el efecto de transición CSS).
$('#myTooltip').on('hidden.bs.tooltip', function () {
　　//　Ejecutar algunas acciones...
}

Ejemplo en línea

El siguiente ejemplo muestra el uso de eventos del plugin de herramientas de sugerencia (Tooltip).

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Ejemplo Bootstrap　-　Eventos del Plugin de Tooltips (Tooltip)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Plugin de Tooltips (Tooltip)　-　ánclade</h4>
Esto es un　<a　href="#"　class="tooltip-show"　data-toggle="tooltip"　
	title="Tooltip predeterminado">Tooltip predeterminado
</a>.
<script>
$('}})-show').tooltip('show');});
$('}})-$((function () { $('.tooltip'}}
	alert("Mensaje de alerta al mostrar");
})});
</script>
</body>
</html>
Verifique aquí ‹/›

Los resultados se muestran a continuación:

Complemento de cuadro emergente BootstrapComplemento de pestañas Bootstrap