TL;DR
- En popover er et lille lag oven på det øvrige indhold.
- Den er god til kort ekstra information, små overlays og lette UI-handlinger.
- HTML har indbygget understøttelse via
popover. - Det er ofte lettere end at bygge en helt egen løsning fra bunden.
Hvis du kun husker én ting: Brug popover til små overlays med et konkret formål, ikke som en generel erstatning for alle lag i UI’et.
Et lille overlay med et konkret formål
En popover er nyttig, når du vil vise noget midlertidigt:
- en lille besked
- ekstra valg
- en forklaring
- et lille panel, der åbnes fra en knap
Det er ikke nødvendigvis en stor modal eller en hel side. Det er ofte noget mindre og mere lokalt.
En enkel HTML-model
Den grundlæggende struktur kan se sådan ud:
<button popovertarget="popup">Open popup</button>
<div id="popup" popover> <h2>I'm a popup</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p></div>Selv om koden er kort, fortæller den meget:
- knappen peger på det element, der skal åbnes
- popoveren har et
id - selve indholdet er almindelig HTML
Hvorfor det er interessant
Det interessante er ikke bare, at man kan få noget til at åbne og lukke. Det interessante er, at HTML allerede giver dig et mønster at arbejde med.
Det betyder færre hjemmelavede løsninger og en mere tydelig kobling mellem knap og popup.