1. semester / Tema 4: Grundlæggende UI

Popover-attributter og struktur

Forstå samspillet mellem `popover`, `id` og `popovertarget`.

Se undervisningsslides

Relevante links

TL;DR

popover markerer elementet som en popover.
id bruges til at identificere den.
popovertarget kobler knappen til den rigtige popover.
God struktur gør det lettere at forstå både HTML og adfærd.

Hvis du kun husker én ting: En popover virker først, når popover, id og popovertarget peger tydeligt på hinanden.

Tre små dele der arbejder sammen

Når du ser en popover-løsning, er det især tre ting, du skal kunne genkende:

popover
id
popovertarget

Et eksempel:

<button popovertarget="popup">Open popup</button>

<div popover id="popup">
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

Hvad de tre dele betyder

popover siger: dette element må opføre sig som en popover
id="popup" giver elementet et navn
popovertarget="popup" siger: denne knap styrer elementet med det id

Det er samme grundidé som mange andre steder i HTML: elementer bliver stærkere, når relationerne er tydelige.

Hold indholdet almindeligt

Selve popoverens indhold er stadig bare HTML. Du kan lægge overskrifter, tekst, knapper og andet indhold ind i den.

Det er en vigtig pointe for begyndere: popover er ikke en ny slags indhold. Det er almindeligt indhold med en særlig åbn/luk-adfærd.

Demo

Prøv det selv i øvelsen nedenfor, hvor du starter med en simpel popover. Når du har det på plads, kan du prøve at tilføje animationer og andre detaljer.