Los tooltips en bootstrap 4 nos sirven para colocar información en un link, un span… por medio de atributos, de este modo al pasar el ratón por encima aparecerán dicha información.

Esto puede resultar muy útil en  algunas aplicaciones donde queremos que el usuario tenga accesible dicha información pero no queremos mostrarla directamente en pantalla.

Para ello debemos usar la siguiente sintaxis:

<a href="#" data-toggle="tooltip" title="Aquí esta el contenido del tootltip">Pasar el raton por aquí</a>

Y añadir a nuestro javascript las siguientes líneas:

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

De este modo boostrap 4 le dará unos estilos mas atractivos a nuestro contenido

¿Pero que pasa si no quiero que el contenido aparezca abajo del elemento?

Bootstrap ha pensado en ello y nos ha proporcionado un atributo denominado data-placement que puede tener los siguientes valores:

• top
• right
• bottom
• left

Según donde queramos que se muestre la información, y su estructura final sería la siguiente:

<a href="#" data-toggle="tooltip" data-placement="right" title="Aquí esta el contenido del tootltip">Pasar el raton por aquí</a>

De este modo podemos controlar esta información extra de forma muy sencilla utilizando los tooltips en bootstrap 4.