twitter-bootstrap
Información sobre herramientas
Buscar..
Observaciones
La información sobre herramientas es un elemento de la interfaz de usuario que parece un pequeño cuadro emergente. Por lo general, se activa cuando un usuario coloca su puntero sobre otro elemento, sin hacer clic en él.
Por razones de rendimiento, la información sobre herramientas debe inicializarse con jQuery. El siguiente código habilitará todas las informaciones sobre herramientas en el DOM:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Herramientas de posicionamiento
Por defecto, la información sobre herramientas aparecerá en la parte superior del elemento. Podemos usar el atributo de data-placement para establecer la posición de la información sobre herramientas en la parte superior, inferior, izquierda o derecha del elemento.
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
También podemos usar data-placement="auto" , para reorientar dinámicamente la información sobre herramientas. La información sobre herramientas en el siguiente ejemplo se mostrará a la izquierda cuando sea posible, de lo contrario se mostrará a la derecha.
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a
Ejemplo básico
Para crear una información sobre herramientas, solo necesitamos agregar el atributo data-toggle="tooltip" y un title al elemento HTML que tendrá la información sobre herramientas. El atributo de título se usa para especificar el texto que se muestra dentro de la información sobre herramientas.
<span data-toggle="tooltip" title="Hello world!">Hover over me</span>
