Criar dicas de ferramentas do Bootstrap 5 é simples usando suas classes de utilitários e funcionalidade JavaScript. Veja como você pode conseguir isso:
Marcação HTML:
1. Adicione o data-bs-toggle="tooltip" atributo para o elemento para o qual você deseja exibir uma dica de ferramenta. Pode ser um botão, link ou qualquer outro elemento adequado. ```html
``` Aqui, o título da dica de ferramenta é especificado diretamente na marcação do elemento. Você também pode definir atributos de dados personalizados como `data-bs-title` para incluir conteúdo de dica de ferramenta dinamicamente em seu código JavaScript.
Script de inicialização:
2. Inclua o pacote JavaScript do Bootstrap: ```html
``` Este script combina Popper e Bootstrap JS, necessários para a funcionalidade adequada das dicas de ferramentas.
Configuração JavaScript (opcional):
Você pode personalizar ainda mais o comportamento da dica de ferramenta usando JavaScript. Bootstrap fornece a classe `Tooltip` para interagir com dicas de ferramentas programaticamente.
```javascript var tooltipTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList =tooltipTriggerList.map (função (tooltipTriggerEl) { retornar novo bootstrap.Tooltip(tooltipTriggerEl) }) ``` Ao iterar todos os elementos com o atributo `data-bs-toggle="tooltip"`, este script inicializa dicas de ferramentas individuais, dando mais controle sobre o comportamento e a capacidade de gerenciar dicas de ferramentas dinamicamente, por exemplo, ao adicionar novos botões à página.
Agora, ao passar o mouse sobre um elemento com uma dica de ferramenta definida, você verá a dica de ferramenta do Bootstrap 5 com o conteúdo fornecido aparecendo sem classes ou estilos CSS extras. Ele se posiciona automaticamente em relação ao elemento alvo usando o mecanismo de posicionamento inteligente do Bootstrap.
