Komunikaty / Popovers

W tym wpisie przedstawię Wam komunikaty, które możemy wyświetlać po kliknięciu na przykład w button.

We wpisie o wprowadzeniu do Bootstrap możecie zauważyć, że prócz arkusza ze stylami Bootstrapa pobieramy też kilka plików JS. Są one niezbędne do działania niektórych elementów Bootstrapa. O jednym z nich właśnie piszę:).

Zaczniemy od tego, że ów element nie działa „z automatu” a musimy go aktywować za pomocą kilku linijek JSa. Najlepiej umieścić je tylko na podstronie na której będzie korzystać z popoverów.

Podstawowy przykład

W poniższym przykładzie uruchomimy sobie nasz popover z pomocą przycisku oraz kilku jego atrybutów. Przyciski zostały już omówione w tym wpisie, więc je pominę. Skupimy się na dodanych atrybutach. Tak więc atrybut data-toggle="popover" mówi JSowi, że te element będzie zawierał komunikat. Atrybut title="tekst" odpowiada za tytuł popovera. Natomiast do atrybutu data-content="Lorem ipsum" wpisujemy treść naszego okna z komunikatem.

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Tytuł okna" data-content="Jakaś tam sobie treść wewnątrz naszego okna">Kliknij by wyświetlić</button>

Kierunek popovera

W poprzednim przykładzie stworzyliśmy komunikat, ale pojawia się on po prawej stronie. Nie zawsze będzie to pożądane, gdyż nie zawsze będziemy mieli tam miejsce. Lub po prostu nasz projekt zakłada by pojawiał się on np z góry. Stronę na której ma się pojawiać popover definiujemy parametrem data-placement="*" i wartościami top, right, bottom, left w zależności od tego, gdzie chcemy go wyświetlić.

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Na górze
</button>

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Po prawej
</button>

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Na dole
</button>

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Po lewej
</button>

Ukrywanie popovera

Jak zauważyliście w poprzednich przykładach, ukrycie popovera jest możliwe tylko za pomocą kliknięcia w przycisk. W tym przykładzie pokażę jak ukrywać go kliknięciem gdziekolwiek, poza przyciskiem. Przede wszystkim teraz musimy skorzystać ze znacznika <a> zamiast <button>. Musimy dodać klasę .popover-dismiss ( może być inna, byle taka sama była w kodzie JS poniżej ) także parametr tabindex="0", parametr role="button" oraz parametr data-trigger="focus". Dodatkowo musimy rozbudować nasz kod JS by wyglądał następująco:

$('.popover-dismiss').popover({
  trigger: 'focus'
})

<a tabindex="0" class="btn btn-lg btn-danger popover-dismiss" role="button" data-toggle="popover" data-trigger="focus" title="Ukrywany popover" data-content="Kliknij gdzieś poza komunikatem by go zamknąć">Ukrywany popover</a>