1. Components
  2. popover

Popover

Floating container for displaying rich content on click or hover.

Demo 

<x-ui.popover.trigger size="sm" variant="outline" intent="gray" popover-id="filter">
    Show Popover
</x-ui.popover.trigger>
<x-ui.popover id="filter" class="w-80">
    <div class="grid gap-4">
        <div class="space-y-2">
            <h4 class="font-medium leading-none">
                Dimensions
            </h4>
            <p class="text-sm text-fg-muted">
                Set the dimensions for the layer.
            </p>
        </div>
        <div class="grid gap-2">
            <div class="grid grid-cols-3 items-center gap-4">
                <x-ui.label for="width">Width</x-ui.label>
                <x-ui.input id="width" type="text" value="100%" class="col-span-2" />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
                <x-ui.label for="maxWidth">Max. width</x-ui.label>
                <x-ui.input id="maxWidth" type="text" value="300px" class="col-span-2" />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
                <x-ui.label for="height">Height</x-ui.label>
                <x-ui.input id="height" type="text" value="25px" class="col-span-2" />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
                <x-ui.label for="maxHeight">Max. height</x-ui.label>
                <x-ui.input id="maxHeight" type="text" value="none" class="col-span-2" />
            </div>
        </div>
    </div>
</x-ui.popover>

Installation

  1. Add the component

    Shell 
    flexi-cli add popover

  2. Install Dropdown

    This component require JS. By default we're using our own Interactive Component Library Flexilla . Install this only if you didn't accept dependencies installation during component addition.
    1. With Alpine
      2. Shell 
      npm i @flexilla/alpine-popover

      Add plugin in flexilla.js

      flexilla.js 
      import AlpinePopover from "@flexilla/alpine-dpopover"

Alpine.plugin(AlpinePopover)
    2. Without Alpine
      3. Make sure that the popover package is not installed
      Shell 
      npm i @flexilla/popover

      Initialize popover in flexilla.js

      flexilla.js 
      import { Popover } from "@flexilla/popover"

// init popover for all Element with data-app-popover attribute
Popover.autoInit('[data-app-popover]')

Examples

Filter 

<x-ui.popover.trigger size="sm" iconOnly variant="outline" intent="gray" popover-id="demo-1">
    <span aria-hidden="true" class="iconify ph--funnel"></span>
</x-ui.popover.trigger>
<x-ui.popover id="demo-1" class="w-72">
    <span class="text-fg mb-4 border-b border-border pb-3 font-medium">Filter</span>
    <form class="w-full flex flex-col space-y-2.5">
        <div class="space-y-1.5 flex flex-col p-2.5 bg-bg-muted/50 rounded-md">
            <x-ui.radio checked name="event_interval" id="all" label="All events" />
            <x-ui.radio name="event_interval" id="passed_event" label="Passed events" />
            <x-ui.radio name="event_interval" id="upcoming_event" label="Upcoming events" />
        </div>
        <div class="relative">
            <x-ui.input type="email" placeholder="Search somthing" class="ps-8" size="sm"/>
            <span aria-hidden="true" class="absolute left-3 h-full flex items-center top-0 text-fg pointer-events-none">
                <span class="flex text-sm iconify ph--magnifying-glass"></span>
            </span>
        </div>
        <div class="relative">
            <x-ui.select name="location" id="location" class="ps-8" size="sm">
                <option value="barca">Barcelona</option>
                <option value="miami">Miami</option>
                <option value="lubumbashi">Lubumbashi</option>
            </x-ui.select>
            <span aria-hidden="true" class="absolute left-3 h-full flex items-center top-0 text-fg pointer-events-none">
                <span aria-hidden="true" class="flex iconify ph--flag text-sm"></span>
            </span>
        </div>
        <div class="relative">
            <x-ui.select name="categories" id="categories" class="ps-8" size="sm">
                <option value="barca">Barcelona</option>
                <option value="miami">Miami</option>
                <option value="lubumbashi">Lubumbashi</option>
            </x-ui.select>
            <span aria-hidden="true" class="absolute left-3 h-full flex items-center top-0 text-fg pointer-events-none">
                <span aria-hidden="true" class="flex iconify ph--map-pin-line text-sm"></span>
            </span>
        </div>
        <x-ui.button size="sm" class="mt-4 justify-center">
            Filter
        </x-ui.button>
    </form>
</x-ui.popover>
Prev
Tooltip

Small informative po...

Next
On this page