Bootstrap 4 Tooltip (Herramientas)

El componente de Tooltip es un pequeño cuadro emergente que aparece cuando el usuario mueve el puntero del mouse sobre un elemento.

Tooltip Example

Esto es un Toolkit

Como crear un Tooltip

Para crear una información sobre herramientas, agrega el atributo data-toggle = “tooltip” a un elemento. Usa el atributo de título para especificar el texto que debe mostrarse dentro de la información sobre Tooltip.

Ejm

<a href="#" data-toggle="tooltip" title="Hooray!">Esto es un Tooltip</a>

Nota: La información sobre Tooltip debe inicializarse con jQuery: selecciona el elemento especificado y llama al método tooltip().

El siguiente código habilitará toda la información sobre Tooltip en el documento:

Ejm

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

Posición de los Tooktips

Por defecto, la información sobre herramientas aparecerá en la parte superior del elemento.

Usa el atributo de colocación de datos para establecer la posición de la información sobre herramientas en la parte superior, inferior, izquierda o derecha del elemento.

Ejm

<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>