Popover

Creates a popover component powered by the Details and Summary elements

Import

@import '@webtui/css/components/popover.css';

Usage

<details is-="popover">
    <summary>Popover</summary>
    <div>Popover content</div>
</details>

Examples

Positioning

Use the position- property to control the position of the popover

Pass two values into position- to set the horizontal and vertical position anchor

<details is-="popover" position-="<anchor>"></details>
<details is-="popover" position-="<x-anchor> <y-anchor>"></details>

<details is-="popover" position-="center"></details>
<details is-="popover" position-="start end"></details>

Use baseline-* values to position the content relative to the edges of the popover

The image below shows the values and positions that can be used in the position- property

Backdrop

Caveats

Elements using the box- utility that appear after the popover in the html markup will appear above the popover content no matter what z-index you provide

<style>
    .column {
        display: flex;
        flex-direction: column;
    }
</style>

<div class="column">
    <details is-="popover">
        <summary>Popover</summary>
        <div>Popover content</div>
    </details>
    <div box-="square">
        Will appear above the open popover since defined after it in the html
    </div>
</div>

As a workaround, you can set the flex-direction to row-reverse or column-reverse on the parent element of the popover

<style>
    .column-reverse {
        display: flex;
        flex-direction: column-reverse;
    }
</style>

<div class="column-reverse">
    <div box-="square">
        Will appear behind the open popover since defined before it in the html
    </div>
    <details is-="popover">
        <summary>Popover</summary>
        <div>Popover content</div>
    </details>
</div>

Reference

Properties

• --popover-backdrop-color: The background color of the backdrop (transparent by default)
• --popover-offset-x: The horizontal offset of the popover
• --popover-offset-y: The vertical offset of the popover

#my-custom-popover {
    --popover-backdrop-color: rgba(0, 0, 0, 0.5);
    --popover-offset-x: 1ch;
    --popover-offset-y: 1lh;
}

Extending

To extend the Popover stylesheet, define a CSS rule on the components layer

@layer components {
    details[is-~='popover'] {
        &[variant-='inverted'] {
            /* ... */
        }

        /* ... */
    }
}

Scope

details[is-~='popover'] {
    /* ... */
}