---
layout: layouts/component.njk
title: Popover
description: Displays rich content in a portal, triggered by a button.
toc:
  - label: Usage
    id: usage
    children:
      - label: Default
        id: usage-default
      - label: Jinja or Nunjucks
        id: usage-jinja
---

{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
{% from "components/popover.njk" import popover %}

{% set code %}
{% call popover(
  id="demo-popover",
  trigger="Open popover",
  trigger_attrs={"class": "btn-outline"},
  content_attrs={"class": "w-80 p-4"}
) %}
  <div class="grid gap-4">
    <header class="grid gap-1.5">
      <h4 class="leading-none font-medium">Dimensions</h4>
      <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
    </header>
    <form class="form grid gap-2">
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-width">Width</label>
        <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8"/>
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-max-width">Max. width</label>
        <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-height">Height</label>
        <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-max-height">Max. height</label>
        <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
      </div>
    </form>
  </div>
{% endcall %}
{% endset %}
{{ code_preview("popover", code | prettyHtml ) }}

<h2 id="usage"><a href="#usage">Usage</a></h2>

<h3 id="usage-html"><a href="#usage-html">Default</a></h3>

<section class="prose my-6">
  <p>If you need to do more than what <code>&lt;select&gt;</code> allows (e.g. HTML options), you can use the code below which uses the <a href="/components/combobox">Popover</a> component. Make sure to include the hidden input with the name you want to use for that field.</p>
</section>

{{ code_block(code | prettyHtml) }}

<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>

<section class="prose my-6">
  <p>If you use Jinja (or Nunjucks), you can use the <code>popover()</code> macro directly.</p>
  <ul>
    <li>
      <a href="/jinja-and-nunjucks">Read more about using Basecoat with Jinja or Nunjucks</a>
    </li>
    <li>
      <a href="/components/popover">Read more about the Popover component</a>
    </li>
  </ul>
</section>

{% set raw_code %}{% raw %}{% call popover(
  id="demo-popover",
  trigger="Open popover",
  trigger_attrs={"class": "btn-outline"},
  content_attrs={"class": "w-80 p-4"}
) %}
<div class="grid gap-4">
  <header class="grid gap-1.5">
    <h4 class="leading-none font-medium">Dimensions</h4>
    <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
  </header>
  <form class="form grid gap-2">
    <div class="grid grid-cols-3 items-center gap-4">
      <label for="demo-popover-width">Width</label>
      <input type="text" id="demo-popover-width" value="100%" class="col-span-2 h-8"/>
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
      <label for="demo-popover-max-width">Max. width</label>
      <input type="text" id="demo-popover-max-width" value="300px" class="col-span-2 h-8"/>
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
      <label for="demo-popover-height">Height</label>
      <input type="text" id="demo-popover-height" value="25px" class="col-span-2 h-8"/>
    </div>
    <div class="grid grid-cols-3 items-center gap-4">
      <label for="demo-popover-max-height">Max. height</label>
      <input type="text" id="demo-popover-max-height" value="none" class="col-span-2 h-8"/>
    </div>
  </form>
</div>
{% endcall %}{% endraw %}{% endset %}
{{ code_block(raw_code, "jinja") }}