Bootstrap 5 Tooltips

Tooltip

Een tooltip component is een klein pop-up venster dat verschijnt wanneer de gebruiker de muispunt op het element verplaatst:

Hoe maak je een tooltip?

Om een tooltip te maken, voeg toe: data-bs-toggle="tooltip" Wordt toegevoegd aan het element.

Gebruik title Het eigenschapsspecifieke tekst wordt weergegeven in de tooltip:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Prima!">Hover over me!</button>

Opmerking:Tooltips moeten met JavaScript geïnitialiseerd worden om te werken.

Het volgende codeblok zal alle tooltips in het document inschakelen:

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

Probeer het zelf

Locatie van de tooltip

Standaard verschijnt de tooltip boven het element.

Gebruik data-bs-placement Stel de positie van de tooltip in van het element aan de top, bottom, links of rechts in:

Voorbeeld

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Heel goed!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Heel goed!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Heel goed!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Heel goed!">Hover</a>

Probeer het zelf