TALL kit

Small overlay that provides additional information or options when a user clicks on a specific element or area.

With the support of the Floating-UI library, the popover component can utilize the flip and shift functionalities, allowing it to intelligently reposition itself on the screen based on available space and the user's interactions.

Hello world

<x-popover x-data>
    <x-button x-popover:trigger>Show popover</x-button>

    <x-slot:content>
        Hello world
    </x-slot:content>
</x-popover>

Installation

Make sure to include the required Alpine and TALL kit plugins to enable the popover functionality.

import {
    floating,
    popover,
} from "@tall-kit/plugins"
import focus from '@alpinejs/focus'

Alpine.plugin(focus)
Alpine.plugin(floating)
Alpine.plugin(popover)

Usage

With inner form

Name

<x-popover x-data>
    <x-button x-popover:trigger>Show popover</x-button>
    <x-slot:content class="w-full flex flex-col max-w-sm py-4 px-2 gap-4">

        <x-input.group id="name" label="Name">
            <x-input/>
        </x-input.group>

        <x-button size="sm" x-on:click="$popover.hideAndFocus()">Save</x-button>

    </x-slot:content>
</x-popover>

With different properties

Lorem ipsum dolor sit amet

<x-popover x-data
           placement="bottom-start"
           color="secondary"
           :overlay="true"
           :arrow="false"
           :offset="5"
>
    <x-button x-popover:trigger color="secondary">
        Trigger
    </x-button>
    <x-slot:content>
        Lorem ipsum dolor sit amet
    </x-slot:content>
</x-popover>