#59. JavaScript – Popover

Popover – tworzenie

W tooltipie mieliśmy możliwość dodania tekstu prostego. Jednak gdy chcemy dodać więcej dodatkowych informacji w “niewidocznym miejscu” niż tylko krótki tekst? Z pomocą popovera mamy taką możliwość. Dzięki niemu, mamy możliwość dodania “okienka” z tytułem oraz treścią do danego elementu – przycisku lub linka.

Popover można wykorzystać do szerszego objaśnienia jakiegoś zagadnienia albo oznaczenia daty i w inny sposób wyświetlenia informacji.

Tak jak w przypadku tooltipa, przy popoverze również wystarczy dodać atrybuty do danego elementu. data-toggle z wartością popover definiuje nam co to za komponent, natomiast atrybut data-content daje nam możliwość wpisania dłuższego tekstu, który będzie główną treścią w “okienku”. Jeżeli chcesz dodać tytuł do popovera wystarczy, że dodasz jeszcze atrybut title.

Spójrz na poniższy przykład. Zastosowałem w nim popover:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

elated-chaum-izor6

elated-chaum-izor6 danielminschinski

Opcje wyświetlania

Popover ma identyczne opcje parametryzacji komponentu jak dla tooltipa. W tym przypadku mamy jednak różnice w wartościach domyślnych.

Popover wyświetla się domyslnie po prawej stronie (atrybut data-placement). Do wyboru mamy cztery pozycje: top, bottom, left i right.

Standardowo, funkcja działa jedynie po kliknięciu w przycisk, a nie jak wcześniej już po najechaniu – do wywołania takiego zachowania służy atrybut data-trigger z wartością click. W tym przypadku mamy do wyboru także cztery opcje, które można łączyć: click, focus, hover, (manual – uwaga – wartość nie może być łączona z pozostałymi).

Spójrz na przykład z zastosowaniem opcji dla popovera:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

nifty-stallman-dflcd

nifty-stallman-dflcd danielminschinski

Ok. To by było na tyle teorii. W następnym materiale przygotuje dla Was ćwiczenie podsumowujące materiały powiązane ze skryptami JS. Do kolejnej środy postaram się przygotować! Tak więc do kolejnego!

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!