Popover

An opt-in helper for the native Popover API. Layer on data-type, data-position, 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-position, and data-backdrop.

Default

A .v-popover with no attributes: centered, fades in with a subtle slide-down.

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-position 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-position="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-position="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 — the triggering element — so no anchor-name setup is needed. Just add popovertarget and data-position handles the rest.

Tooltip · Top

This uses the popover's implicit anchor — the triggering element — no anchor-name setup is needed.

A text Another one
Tooltip · Right

This uses the popover's implicit anchor — the triggering element — no anchor-name setup is needed.

A text Another one
Tooltip · Bottom

This uses the popover's implicit anchor — the triggering element — no anchor-name setup is needed.

A text Another one
Show editor
<div class="stack-h gap-xs pb-3xl">
  <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-right">Right</button>
  <button type="button" class="v-button" data-variant="tinted" popovertarget="demo-tooltip-bottom">Bottom</button>
</div>

<div id="demo-tooltip-top" class="v-popover px-2xs py-2xs" popover="auto" data-type="tooltip">
  <color-mode
    class="of-clip block b-all bc-subtle px-xs pt-xs pb-2xs stack-v surface-base br-m shadow-mid w-max-5"
    stagger-items="reverse from-below hard"
  >
    <h5 class="fs-s fw-medium mb-2xs">Tooltip <span class="ink-subtle">· Top</span></h5>
    <p class="fs-s lh-tight ink-subtle">This uses the popover's implicit anchor — the triggering element — no anchor-name setup is needed.</p>
    <hr class="my-xs" style="opacity: 0.3" />
    <div class="stack-h gap-2xs fs-xs fw-medium">
      <a href="#" class="br-pill lh-tight pl-3xs pr-2xs py-3xs surface-dyed stack-h gap-3xs">
        <color-mode palette="blue" style="opacity: 0.5" inverted class="d-block p-3xs ink-subtle b-all bc-prominent surface-dyed br-circle aspect-square"></color-mode>
        A text
      </a>
      <a href="#" class="br-pill lh-tight pl-3xs pr-2xs py-3xs surface-dyed stack-h gap-3xs">
        <color-mode palette="green" style="opacity: 0.5" inverted class="d-block p-3xs ink-subtle b-all bc-prominent surface-dyed br-circle aspect-square"></color-mode>
        Another one
      </a>
    </div>
  </color-mode>
</div>

<div id="demo-tooltip-right" class="v-popover px-s py-2xs" popover="auto" data-type="tooltip" data-position="right">
  <color-mode
    class="of-clip block b-all bc-subtle px-xs pt-xs pb-2xs stack-v surface-base br-m shadow-mid w-max-5"
    stagger-items="from-start hard"
  >
    <h5 class="fs-s fw-medium mb-2xs">Tooltip <span class="ink-subtle ml-auto">· Right</span></h5>
    <p class="fs-s lh-tight ink-subtle">This uses the popover's implicit anchor — the triggering element — no anchor-name setup is needed.</p>
    <hr class="my-xs" style="opacity: 0.3" />
    <div class="stack-h gap-2xs fs-xs fw-medium">
      <a href="#" class="br-pill lh-tight pl-3xs pr-2xs py-3xs surface-dyed stack-h gap-3xs">
        <color-mode palette="blue" style="opacity: 0.5" inverted class="d-block p-3xs ink-subtle b-all bc-prominent surface-dyed br-circle aspect-square"></color-mode>
        A text
      </a>
      <a href="#" class="br-pill lh-tight pl-3xs pr-2xs py-3xs surface-dyed stack-h gap-3xs">
        <color-mode palette="green" style="opacity: 0.5" inverted class="d-block p-3xs ink-subtle b-all bc-prominent surface-dyed br-circle aspect-square"></color-mode>
        Another one
      </a>
    </div>
  </color-mode>
</div>

<div id="demo-tooltip-bottom" class="v-popover px-s py-2xs" popover="auto" data-type="tooltip" data-position="bottom">
  <color-mode
    class="of-clip block b-all bc-subtle px-xs pt-xs pb-2xs stack-v surface-base br-m shadow-mid w-max-5"
    stagger-items="from-above hard"
  >
    <h5 class="fs-s fw-medium mb-2xs">Tooltip <span class="ink-subtle">· Bottom</span></h5>
    <p class="fs-s lh-tight ink-subtle">This uses the popover's implicit anchor — the triggering element — no anchor-name setup is needed.</p>
    <hr class="my-xs" style="opacity: 0.3" />
    <div class="stack-h gap-2xs fs-xs fw-medium">
      <a href="#" class="br-pill lh-tight pl-3xs pr-2xs py-3xs surface-dyed stack-h gap-3xs">
        <color-mode palette="blue" style="opacity: 0.5" inverted class="d-block p-3xs ink-subtle b-all bc-prominent surface-dyed br-circle aspect-square"></color-mode>
        A text
      </a>
      <a href="#" class="br-pill lh-tight pl-3xs pr-2xs py-3xs surface-dyed stack-h gap-3xs">
        <color-mode palette="green" style="opacity: 0.5" inverted class="d-block p-3xs ink-subtle b-all bc-prominent surface-dyed br-circle aspect-square"></color-mode>
        Another one
      </a>
    </div>
  </color-mode>
</div>