Complemento de información sobre herramientas de Bootstrap
El complemento de información sobre herramientas
El complemento Tooltip es un pequeño cuadro emergente que aparece cuando el usuario mueve el puntero del mouse sobre un elemento:
Sugerencia: los complementos se pueden incluir individualmente (usando el archivo "tooltip.js" individual de Bootstrap) o todos a la vez (usando "bootstrap.js" o "bootstrap.min.js").
Cómo crear una información sobre herramientas
Para crear una información sobre herramientas, agregue el data-toggle="tooltip"
atributo a un elemento.
Utilice el titleatributo para especificar el texto que debe mostrarse dentro de la información sobre herramientas:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Nota: La información sobre herramientas debe inicializarse con jQuery: seleccione el elemento especificado y llame al tooltip()método.
El siguiente código habilitará toda la información sobre herramientas en el documento:
Ejemplo
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Información sobre herramientas de posicionamiento
De forma predeterminada, la información sobre herramientas aparecerá en la parte superior del elemento.
Utilice el data-placementatributo para establecer la posición de la información sobre herramientas en la parte superior, inferior, izquierda o derecha del elemento:
Ejemplo
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Sugerencia: también puede usar el data-placementatributo con un valor de " auto", que permitirá que el navegador decida la posición de la información sobre herramientas. Por ejemplo, si el valor es " auto left", la información sobre herramientas se mostrará en el lado izquierdo cuando sea posible, de lo contrario, en el lado derecho.
Referencia completa de información sobre herramientas de Bootstrap
Para obtener una referencia completa de todas las opciones, métodos y eventos de información sobre herramientas, vaya a nuestra Referencia de información sobre herramientas de Bootstrap JS .