Popovers i Bootstrap 5

Popovers ligner på verktøytips, men de inneholder mer informasjon om et bestemt element og viser bare innholdet når en bruker klikker på dem. Popovers kan avskjediges bare ved å klikke på elementet igjen. Hensikten med Popover er å gi brukeren Knowledg om nettstedet eller hvordan du bruker det. Det brukes også til å gi beskrivende kunnskap om et produkt når brukeren krever det.

Denne artikkelen forteller deg om

• Popover -opprettingsprosess
• Popover -stillinger
• Lukker popover
• Popover på sveving

Hvordan lage popovers

For å lage en popover, legg til data-bs-toggle = ”popover” og tittel = ”Popover Header -tekst går her” for Popovers toppseksjon og Data-BS-Content = ”Popover Body Text Goes Here” For Popovers kroppsseksjon.

Kode

Klikk

Denne prosessen skaper og muliggjør en grunnleggende popover.

Popover -stillinger

Så popovers er også plassert akkurat som verktøytips, for å plassere en popover -bruk Data-BS-plassering = ”Topp/bunn/høyre/venstre” attributt med Data-BS-toggle, tittel og Data-BS-innhold attributter.

Kode

Popover -stillinger

Topp
Buttom



Venstre
Ikke sant

Slik er popover -stillinger spesifisert.

Lukker popovers

Popovers er bare lukket når du klikker på elementet eller knappen igjen du klikker før for å gjøre det synlig. Imidlertid, hvis du vil lukke popoveren ved å klikke hvor som helst på skjermen, bare legg til Data-BS-Trigger = ”Fokus” Attributt til knappen eller elementet ditt.

Kode

Lukker popover

Klikk på meg

Denne prosessen lukker en popover når du klikker hvor som helst på skjermen.

Popover på svevet

Som vi vet er popovers data-bs-trigger = ”Hover” Attributt til knappen eller elementet ditt.

Kode

Popover på svevet

Sveve

Slik ser popover ut på å sveve.

Konklusjon

Popover er opprettet ved å legge til Data-BS-Toggle = “Popover” Egenskap. Overskriften er opprettet ved å legge til Tittel = “Header Text” attributt og kroppen er opprettet ved å legge til data-bs-content = “kroppstekst” Attributt til elementet eller knappen din. For å gjøre det mulig for popover å skrive en JavaScript -kode som skrevet i artikkelen. Ettersom popover bare er lukket ved å klikke på elementet eller knappen igjen, så for å lukke ved å klikke hvor som helst på skjermen, bare legg til Data-BS-Trigger = “Fokus” attributt, og hvis du vil åpne popover ved å sveve markøren bare legg til attributt data-bs-trigger = “Hover”.