Popover

Docs & Examples

• winduum
• winduum-stimulus

Source

• Popover.css
• Popover.js

Example

Vanilla Popover

<div class="x-popover focus">
    <div role="button" class="x-button" tabindex="0">Toggle Popover</div>
    <div class="x-popover-content center shadow dark:bg-body-secondary mt-2.5 p-2 w-32 flex-col">
        Popover content
    </div>
</div>

Javascript Popover

Leverages the Popover API with floating-ui.

<div
    class="x-popover"
    data-controller="x-popover"
>
    <button
        class="x-button"
        role="button"
        popovertargetaction="toggle"
        popovertarget="popoverElement"
        id="popoverAction"
    >Toggle Popover</button>
    
    <div class="x-popover-content shadow h-48" id="popoverElement" aria-describedby="popoverAction" popover="manual">
        Popover content
        <button
            type="button"
            data-action="x-popover#hide"
        >x</button>
    </div>
</div>

Stimulus Actions

toggle

Action is automatically added on first [popovertargetaction] element upon controller connection, if it exists.

<button 
    class="x-button" 
    role="button" 
    popovertargetaction="toggle" 
    data-action="click->x-popover#toggle:prevent keydown.esc@window->x-popover#hide click@window->x-popover#dismiss click->invoke-ripple#show" 
    popovertarget="_6zbalmci_" 
    aria-expanded="false" 
    aria-haspopup="dialog"
>
    Toggle Popover
</button>

show

Action is automatically added on first [popovertargetaction] element upon controller connection, if it exists.

hide

Action is automatically added on first [popovertargetaction] element upon controller connection, if it exists.

    <div class="x-popover-content shadow h-48" id="popoverElement" aria-describedby="popoverAction" popover="manual">
        Popover content
        <button
            type="button"
            data-action="x-popover#hide"
        >x</button>
    </div>

dismiss

Action is automatically added on first [popovertargetaction] element upon controller connection as click@window->x-popover#dismiss, if it exists.

fetch

Fetches the popover remotely, used internally.

onFetchComplete

Callback that is executed after fetch is complete.

Stimulus Values

url

Fetches the popover remotely, popovertarget is added dynamically upon completed request.

    <div
        class="x-popover"
        data-controller="x-popover"
        data-x-popover-url-value="/popover/info.json"
    >
        <button
            class="x-button"
            role="button"
            popovertargetaction="toggle"
            id="popoverAction"
        >Fetch Popover</button>
    </div>

appendTo

Choose a selector where to append the popover after a fetch. Defaults to position after the trigger element of the popover.

    <div
        class="x-popover"
        data-controller="x-popover"
        data-x-popover-url-value="/popover/info.json"
        data-x-popover-append-to-value="body"
        id="popoverAction"
    >
        <button
            class="x-button"
            role="button"
            popovertargetaction="toggle"
        >Fetch Popover</button>
    </div>

manual

Disables automatic generation of action values to [popovertargetaction] element upon controller connection.

<div
    class="x-popover"
    data-controller="x-popover"
    data-x-popover-manual-value="true"
>
    <button
        class="x-button"
        role="button"
        popovertargetaction="toggle"
        popovertarget="popoverElement"
    >Toggle Popover</button>
</div>