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. Install the component

    Shell 
    php artisan flexi:add popover

  2. Install popover dependencies

    Flexiwind uses Flexilla .

    By default when adding the component with the CLI it will ask if you want to install dependdencies,

    Shell 
    npm i @flexilla/popover

  3. Usage

    1. With Alpine/Livewire

      2. Add plugin in flexilla.js

      flexilla.js 
      import { PopoverPlugin } from "./plugins/popover";

Alpine.plugin(PopoverPlugin)
    2. Without Alpine

      3. 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]')

API

Prop Description
x-ui.popover
Popover content container connected to a trigger by id.
id (required)
Unique id used as popover-{id} .
placement (top|right|bottom|left...)
Preferred placement relative to trigger.
keepOpen (boolean)
Controls whether clicking inside closes content.
keepOpenOutside (boolean)
Prevents outside click closing behavior.
gray (boolean)
Applies gray background variant.
trigger (click|hover)
Switches trigger strategy between click and hover. Default: click
x-ui.popover.trigger
Trigger helper using popoverId and button props.

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