Información sobre herramientas de Bootstrap 4
Información sobre herramientas de Bootstrap 4
El componente Tooltip es un pequeño cuadro emergente que aparece cuando el usuario mueve el puntero del mouse sobre un elemento:
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>
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 .