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:
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:
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