Popover
Popover je jedan od elemenata koji pridonose boljoj interakciji između korisnika i aplikacije.
Omogućuje prikaz dodatnog sadržaja u sloju iznad trenutnog sadržaja stranice, bez potrebe za otvaranjem novog prozora ili promjenom konteksta.
Popover omogućuje elegantan prikaz dodatnih informacija bez ometanja korisničkog toka.
Značajno doprinosi jednostavnosti, jasnoći i interaktivnosti korisničkog iskustva.
Popover je idealan alat za izgradnju responzivnih, dostupnih i profesionalnih web aplikacija.
Osnove popovera u HTML-u i CSS-u
HTML sintaksa
<button popovertarget="moj-popover">Prikaži</button><br>
<div id="moj-popover" popover><br>
Ovo je sadržaj popovera.<br>
</div>
Popover elementi su u početku skriveni (display: none) i prikazuju se pozivanjem pomoću HTML metode showPopover() ili pomoću atributa popovertarget.
CSS sintaksa
[popover] {
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 0.25em;
overflow: auto;
color: blue;
background-color: yellow;
}
Tipovi popovera
Popoveri mogu biti:
- auto – mogu se zatvoriti klikom izvan njih ili pritiskom na Esc. Prikaz jednog auto popovera zatvara prethodni.
- hint (eksperimentalno) – ne zatvaraju auto popovere, ali zatvaraju druge hint popovere.
- manual – ne mogu se automatski zatvoriti, zahtijevaju ručnu manipulaciju pomoću JavaScripta.
CSS pseudo-klasa :popover-open
CSS sintaksa
:popover-open {
css deklaracija;
}
Pseudo-klasa :popover-open omogućuje selektiranje elemenata koji se nalaze u prikazanom (vidljivom) stanju popovera.
Na taj način možemo primijeniti specifične stilove na prikazane popovere bez potrebe za dodatnim klasama ili JavaScript manipulacijom.
Podržana je u 5 verzija preglednika: Chrome, Edge, Firefox, Safari, Opera
CSS sintaksa
:popover-open {
width: 150px;
height: 150px;
position: absolute;
inset: unset;
bottom: 25px;
left: 25px;
margin: 0;
color: red;
background-color: black;
font-size: 25px;
}