Popover – DDI

(We should eventually use the Popover API)

Default popover with a background and a dropshadow

A popover has an id. Any element with a data-ddi-popovertarget attribute set to that id toggles it.

---
import { Popover, Text } from "@dynamic-type/ddi/server";
---

<Text class="p:airy">
    <p>
        A popover has an id. Any element with a {" "}
        <code>data-ddi-popovertarget</code> attribute set to that id toggles it.
    </p>

    {(<button data-ddi-popovertarget="example-popover">Hit me!</button>)}
</Text>

<Popover id="example-popover" class="bg drop-shadow p">
    I am a popover
</Popover>

Use the data-ddi-align property to set the position of the popover.

---
import { Popover, Text } from "@dynamic-type/ddi/server";
---

<Text class="p:airy">
    <p>
        Use the <code>data-ddi-align</code> property to set the position of the popover.
    </p>

    {
        (
            <button
                data-ddi-popovertarget="example-popover-2"
                data-ddi-align="top-center"
            >
                Hit me!
            </button>
        )
    }
</Text>

<Popover id="example-popover-2" class="bg drop-shadow p">
    I am a popover
</Popover>

bottom-center opens the popover above the trigger, centered on it.

---
import { Popover, Text } from "@dynamic-type/ddi/server";
---

<Text class="p:airy">
    <p>
        <code>bottom-center</code> opens the popover above the trigger, centered
        on it.
    </p>

    {
        (
            <button
                data-ddi-popovertarget="example-popover-3"
                data-ddi-align="bottom-center"
            >
                Hit me!
            </button>
        )
    }
</Text>

<Popover id="example-popover-3" class="bg drop-shadow p">
    I am a popover
</Popover>

data-ddi-offset-x and data-ddi-offset-y nudge the popover away from its aligned position. They accept any CSS length, like20px, 1rem or -0.5em.

---
import { Popover, Text } from "@dynamic-type/ddi/server";
---

<Text class="p:airy">
    <p>
        <code>data-ddi-offset-x</code> and <code>data-ddi-offset-y</code> nudge the
        popover away from its aligned position. They accept any CSS length, like
        <code>20px</code>, <code>1rem</code> or <code>-0.5em</code>.
    </p>

    {
        (
            <button
                data-ddi-popovertarget="example-popover-4"
                data-ddi-offset-x="1rem"
                data-ddi-offset-y="0.5rem"
            >
                Hit me!
            </button>
        )
    }
</Text>

<Popover id="example-popover-4" class="bg drop-shadow p">
    I am a popover
</Popover>