DocsComponentsPopover

Popover

Rich content in a floating panel, opened by its trigger.

Alpine.jsdepends on button1 file

<pb-ui.popover>
  <pb-slot:trigger><pb-ui.button variant="outline">Dimensions</pb-ui.button></pb-slot:trigger>
  <div class="grid gap-4">
    <div class="space-y-1">
      <h4 class="leading-none font-medium">Dimensions</h4>
      <p class="text-sm text-muted-foreground">Set the dimensions of the layer.</p>
    </div>
    <div class="grid grid-cols-3 items-center gap-4"><pb-ui.label for="w">Width</pb-ui.label><pb-ui.input id="w" value="100%" class="col-span-2 h-8" /></div>
    <div class="grid grid-cols-3 items-center gap-4"><pb-ui.label for="h">Height</pb-ui.label><pb-ui.input id="h" value="25px" class="col-span-2 h-8" /></div>
  </div>
</pb-ui.popover>

Installation

pyblade-ui add popover

Install the dependencies
button and Alpine.js, loaded in your <head>.

Copy this file into your project

components/ui/popover.html

@props({'trigger': '', 'align': 'center', 'side': 'bottom'})
<div data-slot="popover" x-data="{ open: false }" x-on:keydown.escape="open = false" class="relative inline-block">
  <span data-slot="popover-trigger" class="contents" x-on:click="open = !open">{{ trigger }}</span>
  <div data-slot="popover-content" x-show="open" x-cloak x-on:click.outside="open = false"
    x-transition:enter="duration-100 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
    {{ attributes.cn(
      "absolute z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
      {'bottom': 'top-full mt-2', 'top': 'bottom-full mb-2'}[side],
      {'start': 'left-0', 'center': 'left-1/2 -translate-x-1/2', 'end': 'right-0'}[align],
    ) }}>{{ slot }}</div>
</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.popover> is available in all your templates.

<pb-ui.popover align="start">
  <pb-slot:trigger><pb-ui.button variant="outline">Open</pb-ui.button></pb-slot:trigger>
  <p class="text-sm">Place any content here.</p>
</pb-ui.popover>

Props

Prop	Default
trigger	''
align	'center'
side	'bottom'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Drawer Hover card ›