Popover

It's a popup thing that isn't a modal and is tied to some content for positioning. Position relative to the element is done using the normal position values (x, y, -x, -y, inset-x, inset-y).

The child elements not marked with the slot will be the content that is displayed normally, with the slot defining what content appears in the popover when it's open.

Component Macros

• $show

Areas

$content

The content of the popover itself.

Preview

Example

<ws-popover>
    <div ws-x="[b.w 1px] [p 6px]">
        This is some stuff
        <label ws-x="@@button [$outline]" for="pop">
            Show Popover
        </label>
    </div>
    <input type="checkbox" ws-x="[hide]" id="pop" />
    <div ws-x="[$content] [inset.x 0px] [y 0px] [bg teal] [h 150%]">
        Popover Content
        <label ws-x="@@button [$outline]" for="pop">
            Close
        </label>
    </div>
</ws-popover>