¿Cómo crear información sobre herramientas de Bootstrap 5?

Crear información sobre herramientas en Bootstrap 5 es un proceso sencillo que involucra HTML, CSS y JavaScript. Siga estos pasos para agregar información sobre herramientas a sus elementos web:

1. Incluir Bootstrap:

- Asegúrese de incluir archivos Bootstrap CSS y JavaScript en su código HTML. Asegúrese de que sus archivos JavaScript estén colocados justo antes del ` `etiqueta.

2. Estructura HTML:

- Agregue el elemento al que desea adjuntar una información sobre herramientas.

- Envuelva el texto o elemento, como un botón, con una etiqueta de anclaje `` con atributos HTML específicos.

- Dentro de la etiqueta ``, incluya un atributo `title` que especifique el contenido de la información sobre herramientas.

```html

Pasa el cursor sobre mí

```

3. Inicialización de JavaScript:

- Inicialice la información sobre herramientas usando JavaScript incluyendo la siguiente línea:

```javascript

var tooltipTriggerList =document.querySelectorAll('[data-bs-toggle="tooltip"]');

var tooltipList =[...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

```

4. Agregar configuración adicional:

- Especifique la ubicación de la información sobre herramientas modificando el atributo de ubicación de datos en la etiqueta ``, p. `data-placement="top"` para información sobre herramientas sobre el elemento o `data-placement="bottom"`.