La componente Tooltip muestra un pequeño mensaje cuando el usuario se desplaza con la flecha del mouse sobre un elemento HTML que se le ha configurado un Tooltip.
Para trabajar con esta componente además de importar el archivo CSS, debemos importar el archivo de Javascript.
Mostrar tres botones a sitios de buscadores. Mostrar un mensaje cuando la flecha del mouse se encuentra encima de botón.
<!doctype html> <html> <head> <title>Prueba de Bootstrap 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> </head> <body> <div class="container"> <a data-bs-toggle="mensaje" title="Google Inc." href="https://www.google.com" class="btn btn-success">Google</a> <a data-bs-toggle="mensaje" title="Microsoft" href="https://www.bing.com" class="btn btn-success ms-2">Bing</a> <a data-bs-toggle="mensaje" title="Yahoo Inc" href="https://www.yahoo.com" class="btn btn-success ms-2">Yahoo</a> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script> <script> var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="mensaje"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) </script> </body> </html>
Cuando pasamos la flecha del mouse sobre la etiqueta HTML:
Debemos luego de importar el archivo JS agregar:
<script> var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="mensaje"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) </script>
Agregamos en cada elemento HTML la propiedad 'data-bs-toggle' con un valor que se hace referencia luego en el bloque de Javascript al final, el mensaje que aparece es el fijado en la propiedad title:
<a data-bs-toggle="mensaje" title="Google Inc." href="https://www.google.com" class="btn btn-success">Google</a>
Podemos inicializar la propiedad 'data-bs-placement' indicando si queremos que el mensaje aparezca:
top bottom left right
Podemos utilizar etiquetas HTML para dar formato al mensaje, para esto debemos inicializar la propiedad 'data-bs-html' con el valor 'true' y luego especificar en la propiedad 'title' el mensaje a mostrar empleando etiquetas HTML en su interior:
<a data-bs-toggle="mensaje" data-bs-html="true" title="<em>G</em><b>oogle</b>" href="https://www.google.com" class="btn btn-success">Google </a>