Okienka z podpowiedziami / Popover

autor: Robert

16 października 2014

Podobnie jak w przypadku podpowiedzi do linków, czasami chcemy pod jakimś linkiem wyświetlić użytkownikowi informację. Tym razem dłuższa, którą na przykład może być wyjaśnienie jakiegoś pojęcia bez konieczności przechodzenia na inną podstronę. Dzięki czemu nasz czytelnik nie musi się odrywać od całego tekstu tylko dostanie wyjaśnienie w postaci chmurki. Tutaj również musimy skorzystać z odrobiny jQuery i znów nie będę tłumaczył wszystkich opcji bo zaawansowani użytkownicy sobie z nimi poradzą a mniej zaawansowani niedługo dołączą do tych pierwszych:) Dłuższe podpowiedzi, podobnie jak w przypadku dymków możemy dołączyć do buttonów oraz linków. Okienko z podpowiedzią może mieć swój tytuł + tekst, bądź zawierać jedynie tekst. Z racji, że jest to właściwie modyfikacja dymków, tu również możemy operować na data-atrybut oraz na parametrach w kodzie JS.

Podstawowy przykład

Pierwszy przykład pokazuje 4 przyciski w których użyjemy data-atrybut do wyświetlenia podpowiedzi oraz 2 z tych okienek będą miały tytuł Opis tego co zawiera powyższy kod HTML

• Każdemu elementowi nadajemy tą samą klasę (w tym przypadku popover-btn)
• data-container="body", żeby nie mieszać, ten kod wpisujemy bez zmian
• data-toggle="popover", podobnie jak w przypadku dymków, informujemy, że będziemy używać podpowiedzi
• data-placement="pozycja", tutaj "pozycja" może przyjąć wartości top|left|bottom|right
• data-content="tekst", gdzie "tekst" zastępujemy tym co chcemy umieścić w okienku podpowiedzi
• title="tytuł", gdzie "tytuł" zastępujemy własnym tekstem

Jak wspomniałem wcześniej, musimy teraz użyć jQuery aby "uruchomić" nasze podpowiedzi. Opis powyższego kodu JS:

• $(document).ready(function(){ ... });, zapewnia nam wczytanie skryptu dopiero po załadowaniu całej strony WWW.
• $('.popover-btn'), odwołanie się do klasy CSS, którą nadaliśmy przyciskom
• .popover();, metoda odpowiadająca za wyświetlanie podpowiedzi

Podpowiedź po lewej

Podpowiedź u góry

Podpowiedź na dole z tytułem

Podpowiedź z prawej z tytułem

Przykład z użyciem paramertów w JS

Drugi przykład pokazuje 4 linki w których użyjemy parametrów w kodzie JS do wyświetlenia podpowiedzi oraz 2 z tych okienek będą miały tytuł Opis powyższego kodu HTML:

• class="popover-link-left", nadajemy naszemu linkowi klasę, która mówi nam w tym przypadku, że podpowiedź pojawi się z lewej
• data-container="body", ten element pozostawiamy bez zmian
• data-toggle="popover", informujemy, że będziemy używać podpowiedzi
• data-content="tekst", gdzie "tekst" zamieniamy na własną zawartość okienka
• title="tytuł", tutaj "tytuł" zamieniamy na własny tekst, który pojawi się na górze okienka

Kod JS jest w tym przypadku trochę bardziej skomplikowany ale bardzo czytelny: Powyższy kod JS zawiera:

• $(document).ready(function(){ ... });, zapewnia nam wczytanie skryptu dopiero po załadowaniu całej strony WWW.
• jQuery(".popover-link-top"), odwołujemy się do linka z konkretną klasą
• .popover({ ... });, wywołujemy klasę odpowiedzialną za okienka podpowiedzi
• placement : 'top', jest to parametr klasy, ten odpowiada, za wyświetlanie podpowiedzi u góry

Link z podpowiedzią po lewej Link z podpowiedzią u góry Link z podpowiedzią na dole + tytuł Link z podpowiedzią z prawej + tytuł

Wyłączenie okienka poprzez kliknięcie obok

Jak pewnie zauważyliście wyżej, wyłączyć podpowiedź można jedynie poprzez kliknięcie ponownie w przycisk/link i można otworzyć je wszystkie na raz. Jesteśmy przyzwyczajeni do wyłączania okienek poprzez klikanie obok nich (jak np wiele galerii w internecie), zwykle też kliknięcie w jakiś element powoduje zniknięcie innego. Możemy uzyskać taki efekt bardzo łatwo. Wystarczy do naszego kodu przycisku lub linka dodać kolejny atrybut data-trigger="focus" Podpowiedź z prawej z tytułem

Podpowiedź na dole z tytułem

---

Post się przydał? Oceń go proszę.

(6 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Podpowiedzi do linków / Tooltips
Nowszy post →
Kurs tworzenia motywu dla WordPress już ruszył

Robert 10 grudnia 2014 o 09:12

Na daną chwilę opisałem znakomitą większość dokumentacji Bootstrapa. Chodzą plotki o Bootstrap 4 więc stwierdziłem, że obecnie skupię się na tworzeniu tutoriala o WordPress a po premierze BS4 stworzę dla niego dokumentację.

Odpowiedz

Robert 12 maja 2015 o 09:28

Informacje o pojawieniu się wersji 4 wziąłem z oficjalnego bloga Bootstrapa -> http://blog.getbootstrap.com/. Pracują oni nad wersją Alpha, więc myślę, że nie długo pojawi się BS4 i będę mógł stworzyć jego dokumentację:)

Odpowiedz

Marcin 26 sierpnia 2015 o 18:41

Robercie, możemy liczyć na wpis w którym w skrócie opisałbyś co najważniejszego się zmienia w BS4? Wiesz taki „changelog” jak zrobiłeś to z wpisem „Różnice Bootstrap 2.x / 3.0”?

Odpowiedz

Robert 27 sierpnia 2015 o 08:05

Bootstrap 4 jest jeszcze w wersji Alpha więc bardzo wczesnej i chciałem poczekać, ale może faktycznie zrobię tak, że napiszę o różnicach a będę go później rozbudowywał:)

Odpowiedz