Dica de ferramenta Bootstrap 5

Tooltip

O componente de tooltip é uma pequena janela popup que aparece quando o usuário move o ponteiro do mouse sobre o elemento:

Como criar um tooltip

Para criar um tooltip, adicione: data-bs-toggle="tooltip" Adicione a propriedade ao elemento.

Use title A propriedade especifica o texto exibido dentro do tooltip:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Maravilhoso!">Passe o mouse sobre mim!</button>

Notas:Os tooltips precisam ser inicializados com JavaScript para funcionar.

O seguinte código ativará todos os tooltips no documento:

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipTriggerList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
}
</script>

Experimente pessoalmente

Posicionar o tooltip

Por padrão, o tooltip será exibido no topo do elemento.

Use data-bs-placement Defina a posição do tooltip no topo, na parte inferior, na esquerda ou na direita do elemento:

Exemplos

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Excelente!">Passar o mouse</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Excelente!">Passar o mouse</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Excelente!">Passar o mouse</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Excelente!">Passar o mouse</a>

Experimente pessoalmente