73 - Componente : Tooltips

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.

Problema

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:

bootstrap 5 tooltips

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>

Posicionamiento del mensaje.

Podemos inicializar la propiedad 'data-bs-placement' indicando si queremos que el mensaje aparezca:

top
bottom
left
right
bootstrap 5 tooltips

Mensaje con formato.

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>
bootstrap 5 tooltips

Ejecutar Ejemplo

Retornar