Boksy wyskakujące Bootstrap 5

Okienko wyzwalające

Okienko wyzwalające (Popover) komponent jest podobny do tooltip; to rodzaj okienka, które po kliknięciu elementu pojawia się. Różnica polega na tym, że okienko wyzwalające może zawierać więcej treści.

Jak utworzyć okienko wyzwalające

Aby utworzyć okienko wyzwalające, umieść data-bs-toggle="popover" Atrybut dodaje do elementu.

Użyj title Atrybut określa tekst tytułu okienka wyzwalającego, i używa data-bs-content Atrybut określa tekst wyświetlany w treści okienka wyzwalającego:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Tytuł okienka wyzwalającego" data-bs-content="Kilka treści w okienku wyzwalającym">Przełącz okienko wyzwalające</button>

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

Poniższy kod włączy wszystkie okienka wyzwalające w dokumencie:

Przykład

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  zwróć nowe bootstrap.Popover(popoverTriggerEl)
})
</script>

Spróbuj sam

Umieszczanie okienka wyzwalającego

Domyślnie, okienko wyzwalające pojawi się po prawej stronie elementu.

Użyj data-bs-placement Ustawienie pozycji okienka wyzwalającego w górę, w dół, na lewo lub na prawo elementu:

Przykład

<a href="#" title="Nagłówek" data-bs-toggle="popover" data-bs-placement="top" data-content="Zawartość">Górny</a>
<a href="#" title="Nagłówek" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Zawartość">Dolny</a>
<a href="#" title="Nagłówek" data-bs-toggle="popover" data-bs-placement="left" data-content="Zawartość"> Lewo</a>
<a href="#" title="Nagłówek" data-bs-toggle="popover" data-bs-placement="right" data-content="Zawartość">Prawo</a>

Spróbuj sam

Uwaga:Jeśli nie ma wystarczająco dużo miejsca, atrybut placement nie będzie działał zgodnie z oczekiwaniami. Na przykład: jeśli używasz atrybutu placement top na górze strony (bez miejsca na rezerwy), okienko wyskakujące zostanie wyświetlone poniżej lub po prawej stronie elementu (w dowolnym miejscu, gdzie jest miejsce na to).

Zamknij wyskakujące okienko

Domyślnie, kliknięcie w element jeszcze raz zamknie wyskakujące okienko. Możesz jednak użyć data-bs-trigger="focus" Atrybut, ustawienie tego atrybutu pozwala zamknąć wyskakujące okienko po kliknięciu w element zewnętrzny:

Przykład

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Kliknięcie dowolnego miejsca w dokumencie zamknie to okienko">Kliknij mnie</a>

Spróbuj sam

Wyskakujące okienko przy nawigacji

Wskazówka:Jeśli chcesz, aby wyskakujące okienko było wyświetlane, gdy wskaźnik myszy przechodzi nad elementem, użyj wartości "hover" z data-bs-trigger Atrybut:

Przykład

<a href="#" title="Nagłówek" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Tekst wyskakującego okienka">Przymknij nad mną</a>

Spróbuj sam