Components

Blocks

  1. Popover
    1. Default
    2. Placement
    3. Props
component

Popover

A contextual floating component for displaying information and interactive content anchored to a trigger element. Uses Floating UI for intelligent positioning with arrow indicator support and click-outside-to-close behavior.

Default

The default popover with a trigger button and positioned content.

Popover Title

This is the popover content. Click outside to close. 
---
import Popover from "../popover.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Popover id="astro-demo-popover-default" title="Popover Title">
    This is the popover content. Click outside to close.
  </Popover>

  <Button id="astro-demo-popover-trigger">Open Popover</Button>
</div>

<script>
  import { usePopover } from "@pindoba/astro-popover/use-popover";

  const trigger = document.getElementById("astro-demo-popover-trigger");
  usePopover({ id: "astro-demo-popover-default", trigger });
</script>

Placement

Use the placement prop to control where the popover appears relative to its trigger. Automatically flips and shifts when there is insufficient space.

Top

Placed above the trigger.

Bottom

Placed below the trigger.

Left

Placed to the left.

Right

Placed to the right. 
---
import Popover from "../popover.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Popover id="astro-demo-popover-top" title="Top">
    Placed above the trigger.
  </Popover>
  <Button id="astro-demo-popover-top-trigger">Top</Button>

  <Popover id="astro-demo-popover-bottom" title="Bottom">
    Placed below the trigger.
  </Popover>
  <Button id="astro-demo-popover-bottom-trigger">Bottom</Button>

  <Popover id="astro-demo-popover-left" title="Left">
    Placed to the left.
  </Popover>
  <Button id="astro-demo-popover-left-trigger">Left</Button>

  <Popover id="astro-demo-popover-right" title="Right">
    Placed to the right.
  </Popover>
  <Button id="astro-demo-popover-right-trigger">Right</Button>
</div>

<script>
  import { usePopover } from "@pindoba/astro-popover/use-popover";

  usePopover({
    id: "astro-demo-popover-top",
    trigger: document.getElementById("astro-demo-popover-top-trigger"),
    placement: "top",
  });
  usePopover({
    id: "astro-demo-popover-bottom",
    trigger: document.getElementById("astro-demo-popover-bottom-trigger"),
    placement: "bottom",
  });
  usePopover({
    id: "astro-demo-popover-left",
    trigger: document.getElementById("astro-demo-popover-left-trigger"),
    placement: "left",
  });
  usePopover({
    id: "astro-demo-popover-right",
    trigger: document.getElementById("astro-demo-popover-right-trigger"),
    placement: "right",
  });
</script>

Props

props · 11 total
prop type default req description
open boolean false Controls the open/closed state of the popover. Bindable in Svelte.
placement "top""top-start""top-end""bottom""bottom-start""bottom-end""left""left-start""left-end""right""right-start""right-end" "bottom" Preferred placement of the popover relative to the trigger. Floating UI will flip or shift as needed to stay in the viewport.
trigger Snippet<[{ 'data-popover-trigger': true }]> undefined Snippet (Svelte) that renders the trigger element. The popover wires click/hover/focus listeners automatically based on triggerStrategy — spread the props onto your trigger element.
triggerStrategy "click""hover""focus""hover-focus""manual" "click" How the trigger opens/closes the popover. 'click' toggles on click. 'hover' opens on mouseenter (after openDelay) and closes on mouseleave. 'focus' opens on focus. 'hover-focus' combines both. 'manual…

triggerStrategy

How the trigger opens/closes the popover. 'click' toggles on click. 'hover' opens on mouseenter (after openDelay) and closes on mouseleave. 'focus' opens on focus. 'hover-focus' combines both. 'manual' leaves event wiring to the consumer.

Type "click" | "hover" | "focus" | "hover-focus" | "manual"
Default "click"
Required No
openDelay number 150 Delay in ms before a hover trigger opens the popover. Ignored by non-hover strategies.
closeDelay number 100 Delay in ms before a hover trigger closes the popover. Ignored by non-hover strategies. Moving the cursor between trigger and dialog cancels a pending close.
triggerElement HTMLElementnull undefined Reference to the trigger DOM element. Bindable. Used for positioning when the trigger is managed externally.
id string auto-generated UUID Unique identifier for the popover dialog element.
title string undefined Dialog title displayed in the popover header.
passThrough { arrow?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; root?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLDialogElement> }; ... } undefined Custom styling and props for popover slots. The arrow slot controls the positioning indicator. All dialog slots are also available.
children Snippetslot undefined Content rendered inside the popover.