Okienka z podpowiedziami / Popover Plugin Bootstrap

Czas czytania: < 1 minut

Wtyczka Popover (z ang. Popover Plugin) umożliwia dodawanie do linka okienka z podpowiedziami. Okno to wyświetla się w postaci pop-up, które pojawia się, gdy użytkownik kliknie element. Tekst zamieszony w okienku nie może być jednak za długi, najwyżej kilka krótkich zdań.

Co możemy zrobić?

Do okienka z podpowiedzią możemy dodać swój tytuł oraz tekst nie jest to jednak obowiązkowe i możemy użyć jedynie sam tekst. W celu uruchomienia dymka oprócz standardowej biblioteki bootstrap dodajemy również kod w jquery.

Demo Popover <- kliknij w nazwę

Jak dodać wyskakujące okienko

Poniże prezentuje kod kilku okienek otwierających się na różne strony.

<ul class="list-inline">
    <li><a href="#" title="Nagłówek 1" data-toggle="popover" data-placement="top" data-content="treść">Góra</a></li>
    <li><a href="#" title="Nagłówek 2" data-toggle="popover" data-placement="bottom" data-content="treść">Dół</a></li>
    <li><a href="#" title="Nagłówek 3" data-toggle="popover" data-placement="left" data-content="treść">Lewo</a></li>
    <li><a href="#" title="Nagłówek 4" data-toggle="popover" data-placement="right" data-content="treść">Prawo</a></li>
  </ul>

Jak widać jest to dość prosty kod. Jednak nadal nie kompletny. W celu jego uruchomienia trzeba jeszcze dodać do strony odpowiedni kod js (JQuery) oraz oczywiście jeśli nie zrobiło się tego wcześniej bibliotekę bootstrap.

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

Elementem odpowiadającym za pojawienie się okienka w konkretnym miejscu jest:

data-placement=””

Przyjmować on może 4 wartości top (góra), bottom (dół), left (lewo), right (prawo). W zależności, którą wybierzemy chmurka otworzy się w innym miejscu.

title=”Nagłówek 1″ – tekst u góry okienka

data-content=”treść” – tekst w dolnej części okienka

Jak widać nie jest to zbyt skompilowany w użyciu kod a mogący być użytecznym np. przy wstawianiu krótkich komentarzy na stronie.