component

Popover

A contextual floating component for displaying information and interactive content anchored to a trigger element. Uses Floating UI for intelligent positioning, with an arrow tying the panel to its trigger and click-outside-to-close behavior.

Default

The default popover with a trigger button and positioned content.

AstroReactSvelteVue

PreviewCode

---
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>

import React, { type JSX } from "react";
import { Popover } from "../Popover";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function Default(): JSX.Element {
  return (
    <div className={stack({ gap: "md", direction: "column", align: "start" })}>
      <Popover
        id="demo-popover-default"
        title="Popover Title"
        trigger={(triggerProps) => (
          <Button {...triggerProps}>Open Popover</Button>
        )}
      >
        This is the popover content. Click outside to close.
      </Popover>
    </div>
  );
}

<script lang="ts">
  import Popover from "../popover.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

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

<script setup lang="ts">
import { Popover } from "@pindoba/vue-popover";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', align: 'start' })">
    <Popover id="vue-demo-popover-default" title="Popover Title">
      <template #trigger="{ triggerProps }">
        <Button v-bind="triggerProps">Open Popover</Button>
      </template>
      This is the popover content. Click outside to close.
    </Popover>
  </div>
</template>

Arrow

Every popover points back at its trigger. The arrow stays centred on the anchor as the popover repositions and moves to the correct edge when the panel flips, and it takes its fill and border from the panel itself — a recoloured or translucent popover needs no extra configuration. Pass arrow={false} for surfaces that shouldn’t read as tethered, such as a rail flyout or a submenu that overlaps the panel it grows from.

AstroReactSvelteVue

PreviewCode

---
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-arrow-on" title="Tethered">
    The arrow tracks the trigger and follows the panel through a flip.
  </Popover>
  <Button id="astro-demo-popover-arrow-on-trigger">With arrow</Button>

  <Popover id="astro-demo-popover-arrow-off" title="Untethered" arrow={false}>
    No arrow — the panel reads as its own surface.
  </Popover>
  <Button id="astro-demo-popover-arrow-off-trigger">arrow={"{false}"}</Button>
</div>

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

  usePopover({
    id: "astro-demo-popover-arrow-on",
    trigger: document.getElementById("astro-demo-popover-arrow-on-trigger"),
  });
  usePopover({
    id: "astro-demo-popover-arrow-off",
    trigger: document.getElementById("astro-demo-popover-arrow-off-trigger"),
  });
</script>

import React, { type JSX } from "react";
import { Popover } from "../Popover";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function Arrow(): JSX.Element {
  return (
    <div
      className={stack({
        gap: "md",
        direction: "row",
        align: "center",
        flexWrap: "wrap",
      })}
    >
      <Popover
        id="react-demo-popover-arrow-on"
        title="Tethered"
        trigger={(p) => <Button {...p}>With arrow</Button>}
      >
        The arrow tracks the trigger and follows the panel through a flip.
      </Popover>

      <Popover
        id="react-demo-popover-arrow-off"
        title="Untethered"
        arrow={false}
        trigger={(p) => <Button {...p}>{"arrow={false}"}</Button>}
      >
        No arrow — the panel reads as its own surface.
      </Popover>
    </div>
  );
}

<script lang="ts">
  import Popover from "../popover.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div
  class={stack({
    gap: "md",
    direction: "row",
    align: "center",
    flexWrap: "wrap",
  })}
>
  <Popover id="demo-popover-arrow-on" title="Tethered">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>With arrow</Button>
    {/snippet}
    The arrow tracks the trigger and follows the panel through a flip.
  </Popover>

  <Popover id="demo-popover-arrow-off" title="Untethered" arrow={false}>
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>arrow={false}</Button>
    {/snippet}
    No arrow — the panel reads as its own surface.
  </Popover>
</div>

<script setup lang="ts">
import { Popover } from "@pindoba/vue-popover";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div
    :class="
      stack({ gap: 'md', direction: 'row', align: 'center', flexWrap: 'wrap' })
    "
  >
    <Popover id="vue-demo-popover-arrow-on" title="Tethered">
      <template #trigger="{ triggerProps }">
        <Button v-bind="triggerProps">With arrow</Button>
      </template>
      The arrow tracks the trigger and follows the panel through a flip.
    </Popover>

    <Popover id="vue-demo-popover-arrow-off" title="Untethered" :arrow="false">
      <template #trigger="{ triggerProps }">
        <Button v-bind="triggerProps">arrow={false}</Button>
      </template>
      No arrow — the panel reads as its own surface.
    </Popover>
  </div>
</template>

Placement

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

AstroReactSvelteVue

PreviewCode

---
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>

import React, { type JSX } from "react";
import { Popover } from "../Popover";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function Placement(): JSX.Element {
  return (
    <div
      className={stack({
        gap: "md",
        direction: "row",
        align: "center",
        flexWrap: "wrap",
      })}
    >
      <Popover
        id="demo-popover-top"
        placement="top"
        title="Top"
        trigger={(p) => <Button {...p}>Top</Button>}
      >
        Placed above the trigger.
      </Popover>

      <Popover
        id="demo-popover-bottom"
        placement="bottom"
        title="Bottom"
        trigger={(p) => <Button {...p}>Bottom</Button>}
      >
        Placed below the trigger.
      </Popover>

      <Popover
        id="demo-popover-left"
        placement="left"
        title="Left"
        trigger={(p) => <Button {...p}>Left</Button>}
      >
        Placed to the left.
      </Popover>

      <Popover
        id="demo-popover-right"
        placement="right"
        title="Right"
        trigger={(p) => <Button {...p}>Right</Button>}
      >
        Placed to the right.
      </Popover>
    </div>
  );
}

<script lang="ts">
  import Popover from "../popover.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

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

  <Popover id="demo-popover-bottom" placement="bottom" title="Bottom">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Bottom</Button>
    {/snippet}
    Placed below the trigger.
  </Popover>

  <Popover id="demo-popover-left" placement="left" title="Left">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Left</Button>
    {/snippet}
    Placed to the left.
  </Popover>

  <Popover id="demo-popover-right" placement="right" title="Right">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Right</Button>
    {/snippet}
    Placed to the right.
  </Popover>
</div>

<script setup lang="ts">
import { Popover } from "@pindoba/vue-popover";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
</script>

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

    <Popover id="vue-demo-popover-bottom" placement="bottom" title="Bottom">
      <template #trigger="{ triggerProps }">
        <Button v-bind="triggerProps">Bottom</Button>
      </template>
      Placed below the trigger.
    </Popover>

    <Popover id="vue-demo-popover-left" placement="left" title="Left">
      <template #trigger="{ triggerProps }">
        <Button v-bind="triggerProps">Left</Button>
      </template>
      Placed to the left.
    </Popover>

    <Popover id="vue-demo-popover-right" placement="right" title="Right">
      <template #trigger="{ triggerProps }">
        <Button v-bind="triggerProps">Right</Button>
      </template>
      Placed to the right.
    </Popover>
  </div>
</template>

#Default

#Arrow

#Placement

Default

Arrow

Placement