Podpowiedzi Bootstrap 5

Tooltip

Component tooltip to mały okienko, które pojawia się, gdy użytkownik przenosi wskaźnik myszy nad elementem:

Jak utworzyć tooltip

Aby utworzyć tooltip, należy: data-bs-toggle="tooltip" Atrybut dodaje się do elementu.

Użyj title Atrybut określa tekst wyświetlany w tooltipie:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Świetnie!">Przytrzymaj nad mną!</button>

Uwaga:Tooltipy muszą być zainicjalizowane za pomocą JavaScript, aby działać.

Poniższy kod włączy wszystkie tooltipy w dokumencie:

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

Spróbuj sam

Umieszczanie tooltipa

Domyślnie, tooltip pojawi się na górze elementu.

Użyj data-bs-placement Ustawienie pozycji tooltipa na górze, dołu, po lewej lub po prawej stronie elementu:

Przykłady

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Świetnie!">Najedź</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Świetnie!">Najedź</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Świetnie!">Najedź</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Świetnie!">Najedź</a>

Spróbuj sam