Bootstrap 5 værktøjsbeskrivelser

Værktøjslinje

Værktøjslinjen er en lille pop-up-boks, der vises, når brugeren flytter musepegeren over elementet:

Sådan oprettes en værktøjslinje

For at oprette en værktøjslinje, skal du tilføje data-bs-toggle="tooltip" Tilføj egenskaben til elementet.

Brug title Egenskab specificerer teksten, der vises i værktøjslinjen:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Super godt!">Bliv ved med at holde musen over mig!</button>

Bemærk:Værktøjsbobler skal initialiseres med JavaScript for at fungere.

Følgende kode aktiverer alle værktøjsbobler i dokumentet:

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

Prøv det selv

Placer værktøjsboblen

Som standard vises værktøjsboblen øverst på elementet.

Brug data-bs-placement Indstil positionen for værktøjsboblen øverst, nederst, til venstre eller til højre for elementet:

Eksempel

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

Prøv det selv