Popover
An opt-in helper for the native Popover API. Layer on data-type, data-side, data-align, and data-backdrop to control positioning and transitions.
.v-popover is an opt-in helper for the native Popover API. Start with a bare .v-popover and add only what you need with data-type, data-side, data-align, and data-backdrop.
It is very important to NOT set any display properties (like stack-v/stack-h or d-block/d-grid) on v-popover. This is because the popover relies on User Agent styling to do its thing. Much better to let child element carry background, borders or shadows.
Default
A .v-popover with no attributes defaults to a centered dialog-like popover.
Show editor
<button type="button" class="v-button" popovertarget="demo-default">
Open popover
</button>
<div id="demo-default" class="v-popover p-m" popover="auto">
<div class="p-l stack-v surface-dyed br-m shadow-mid" stagger-items>
<a
class="stack-v fs-xs px-3xs py-3xs"
href="/fundamentet/formaal-og-verdier"
>
<span class="fw-bold ink-default">Formål og verdier</span>
<span class="subnav-description ink-subtle"
>Hvorfor vi finnes, og verdiene som styrer valgene våre</span
>
</a>
<a
class="stack-v fs-xs px-3xs py-3xs"
href="/fundamentet/formaal-og-verdier"
>
<span class="fw-bold ink-default">Formål og verdier</span>
<span class="subnav-description ink-subtle"
>Hvorfor vi finnes, og verdiene som styrer valgene våre</span
>
</a>
<a
class="stack-v fs-xs px-3xs py-3xs"
href="/fundamentet/formaal-og-verdier"
>
<span class="fw-bold ink-default">Formål og verdier</span>
<span class="subnav-description ink-subtle"
>Hvorfor vi finnes, og verdiene som styrer valgene våre</span
>
</a>
</div>
</div>Dialog
data-type="dialog" adds a scale+fade transition. Add data-backdrop for a visible overlay behind it.
Er du en Variant?
A centered dialog with a backdrop overlay. Click outside or press Escape to dismiss.
Show editor
<button type="button" class="v-button" popovertarget="demo-dialog">
Open dialog
</button>
<div
id="demo-dialog"
class="v-popover"
popover="auto"
data-type="dialog"
data-backdrop
>
<div class="stack-v of-clip br-m shadow-high">
<color-mode palette="grey" class="d-block surface-tinted">
<div
class="px-l-xl pt-l-xl pb-s stack-v"
style="max-width: 560px;"
stagger-items
>
<h2 class="fs-xl fw-bold">Er du en Variant?</h2>
<p class="mt-s">
A centered dialog with a backdrop overlay. Click outside or press
Escape to dismiss.
</p>
<div class="stack-v gap-2xs mt-xl">
<color-mode class="contents" palette="blue">
<button
type="button"
class="v-button"
popovertarget="demo-dialog"
popovertargetaction="hide"
>
Kom igang
</button>
</color-mode>
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-dialog"
popovertargetaction="hide"
>
Jeg er allrede en Variant
</button>
</div>
</div>
</color-mode>
</div>
</div>Drawer
data-type="drawer" attaches to an edge and slides in. Defaults to the right edge. Use data-side to pick an edge.
Right drawer
Slides in from the right edge. Width is up to you.
Left drawer
Slides in from the left edge.
Bottom drawer
Slides up from the bottom edge.
Show editor
<div class="stack-h gap-xs">
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-drawer-right"
>
Right
</button>
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-drawer-left"
>
Left
</button>
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-drawer-bottom"
>
Bottom
</button>
</div>
<div
id="demo-drawer-right"
class="v-popover"
popover="auto"
data-type="drawer"
data-backdrop="true"
style="width: 320px;"
>
<div class="p-l stack-v gap-m surface-base shadow-high" style="height: 100%;">
<h2 class="fs-l fw-bold">Right drawer</h2>
<p>Slides in from the right edge. Width is up to you.</p>
</div>
</div>
<div
id="demo-drawer-left"
class="v-popover"
popover="auto"
data-type="drawer"
data-side="left"
data-backdrop="true"
style="width: 320px;"
>
<div class="p-l stack-v gap-m surface-base shadow-high" style="height: 100%;">
<h2 class="fs-l fw-bold">Left drawer</h2>
<p>Slides in from the left edge.</p>
</div>
</div>
<div
id="demo-drawer-bottom"
class="v-popover"
popover="auto"
data-type="drawer"
data-side="bottom"
data-backdrop="true"
style="max-height: 40vh;"
>
<div
class="p-l stack-v gap-m surface-base shadow-high"
style="height: 100%;"
stagger-items
>
<h2 class="fs-l fw-bold">Bottom drawer</h2>
<p>Slides up from the bottom edge.</p>
</div>
</div>Tooltip
data-type="tooltip" uses the popover's implicit anchor of the triggering element. No anchor-name setup is needed. data-side picks top or bottom (defaults to top); data-align picks which edges line up — left, center, or right (defaults to center). It flips automatically to stay in view.
Above · left edges line up
Above · centred
Above · right edges line up
Below · left edges line up
Below · centred
Below · right edges line up
Show editor
<div class="stack-v gap-l py-3xl">
<div class="stack-h gap-xs justify-center">
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-tooltip-top-left"
>
Top left
</button>
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-tooltip-top"
>
Top
</button>
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-tooltip-top-right"
>
Top right
</button>
</div>
<div class="stack-h gap-xs justify-center">
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-tooltip-bottom-left"
>
Bottom left
</button>
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-tooltip-bottom"
>
Bottom
</button>
<button
type="button"
class="v-button"
data-variant="tinted"
popovertarget="demo-tooltip-bottom-right"
>
Bottom right
</button>
</div>
</div>
<div
id="demo-tooltip-top-left"
class="v-popover my-2xs"
popover="auto"
data-type="tooltip"
data-side="top"
data-align="left"
>
<div class="surface-base b-all bc-subtle br-m shadow-mid px-s py-2xs fs-s">
Above · left edges line up
</div>
</div>
<div
id="demo-tooltip-top"
class="v-popover my-2xs"
popover="auto"
data-type="tooltip"
>
<div class="surface-base b-all bc-subtle br-m shadow-mid px-s py-2xs fs-s">
Above · centred
</div>
</div>
<div
id="demo-tooltip-top-right"
class="v-popover my-2xs"
popover="auto"
data-type="tooltip"
data-side="top"
data-align="right"
>
<div class="surface-base b-all bc-subtle br-m shadow-mid px-s py-2xs fs-s">
Above · right edges line up
</div>
</div>
<div
id="demo-tooltip-bottom-left"
class="v-popover my-2xs"
popover="auto"
data-type="tooltip"
data-side="bottom"
data-align="left"
>
<div class="surface-base b-all bc-subtle br-m shadow-mid px-s py-2xs fs-s">
Below · left edges line up
</div>
</div>
<div
id="demo-tooltip-bottom"
class="v-popover my-2xs"
popover="auto"
data-type="tooltip"
data-side="bottom"
>
<div class="surface-base b-all bc-subtle br-m shadow-mid px-s py-2xs fs-s">
Below · centred
</div>
</div>
<div
id="demo-tooltip-bottom-right"
class="v-popover my-2xs"
popover="auto"
data-type="tooltip"
data-side="bottom"
data-align="right"
>
<div class="surface-base b-all bc-subtle br-m shadow-mid px-s py-2xs fs-s">
Below · right edges line up
</div>
</div>