Popovers in Bootstrap 5

Popovers są podobne do podpowiedzi, ale zawierają więcej informacji dotyczących konkretnego elementu i pokazują jego treść tylko wtedy, gdy użytkownik kliknie. Popovers można odrzucić tylko, klikając ponownie element. Celem Popover jest przekazanie użytkownikom wiedzy na temat strony internetowej lub sposobu korzystania z niej. Służy również do przekazywania opisowej wiedzy na temat produktu, gdy użytkownik tego wymaga.

Ten artykuł opowiada o

• Proces tworzenia popover
• Pozycje popover
• Zamknięcie popover
• Popover na unoszeniu

Jak tworzyć popovers

Aby utworzyć popover, dodaj data-bs-toggle = ”popover” I title = ”Tekst nagłówka popover idzie tutaj” dla sekcji nagłówka Popovera i Data-BS-Content = ”Tekst Body Popover TUTE” dla sekcji ciała Popovera.

Kod

Kliknij

Ten proces tworzy i umożliwia podstawowy popover.

Pozycje popover

Tak więc popover są również ustawione tak jak podpowiedzi, aby ustawić użycie popover Data-BS-Placement = ”TOP/Bottom/Right/Left” atrybut z Data-BS-Toggle, tytuł I Data-BS-Content atrybuty.

Kod

Pozycje popover

Szczyt
Buttom



Lewy
Prawidłowy

W ten sposób określane są pozycje popover.

Zamknięcie popoverów

Popovers są zamknięte tylko po kliknięciu elementu lub przycisku, do którego klikniesz wcześniej, aby był widoczny. Jeśli jednak chcesz zamknąć popover, klikając w dowolnym miejscu na ekranie, po prostu dodaj Data-BS-Trigger = ”Focus” atrybut do twojego przycisku lub elementu.

Kod

Zamknięcie popover

Kliknij

Ten proces zamyka popover po kliknięciu w dowolnym miejscu na ekranie.

Popover na zawisie

Jak wiemy, popovers są widoczne tylko podczas klikania przycisku lub elementu, ale jeśli chcesz, aby ten popover był widoczny tylko, unosząc kursor na element lub przycisk, podobnie jak tooltip, a następnie dodaj data-BS-Trigger = ”HOVER” atrybut do twojego przycisku lub elementu.

Kod

Popover na zawisie

Unosić się

Tak pojawia się popover na unoszeniu.

Wniosek

Popover powstaje przez dodanie Data-BS-Toggle = „Popover” atrybut. Jego nagłówek powstaje przez dodanie Title = „Tekst nagłówka” atrybut i jego ciało są tworzone przez dodanie Data-BS-Content = „Body Tekst” atrybut do twojego elementu lub przycisku. Aby umożliwić Popover napisać kod JavaScript, jak napisano w artykule. Ponieważ Popover jest zamknięty tylko poprzez ponownie klikając element lub przycisk, więc do zamknięcia, klikając wszędzie na ekranie, po prostu dodaj Data-BS-Trigger = „Focus” atrybut, a jeśli chcesz otworzyć popover, unosząc kursor, dodaj tylko atrybut Data-BS-Trigger = „Hover”.