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>

Autocomplete Popover

Preview

Source

• PopoverAutocomplete.latte

<div class="x-popover trigger-focus group mx-auto w-80" data-controller="x-popover">
    <div class="x-control w-full">
        <input
            data-action="input->x-popover#autocomplete"
            data-x-popover-target="autocomplete"
            type="search"
            placeholder="Vyhledávání ..."
            autocomplete="off"
            role="combobox"
            aria-autocomplete="list"
            aria-controls="popoverContent"
            aria-haspopup="listbox"
            aria-expanded="true"
            value="Volba"
        >
    </div>
    <div
        class="x-popover-content center flex flex-col shadow dark:bg-body-secondary mt-2 p-2 gap-2 w-full empty:closed group-not-has-aria-expanded:closed"
        data-x-popover-target="content"
        role="listbox"
        id="popoverContent"
    >
        <button id="option-1" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 1</button>
        <button id="option-2" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 2</button>
        <button id="option-3" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 3</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>