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.

PreviewCode

---
// GENERATED from packages/demos/popover/default.demo.tsx — edit the source, not this file.
import Popover from "@pindoba/astro-popover";
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-default-trigger">Open Popover</Button>
</div>

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

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

// GENERATED from packages/demos/popover/default.demo.tsx — edit the source, not this file.
import { Popover } from "@pindoba/react-popover";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", align: "start" })}>
      <Popover
        id="react-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">
  // GENERATED from packages/demos/popover/default.demo.tsx — edit the source, not this file.
  import Popover from "@pindoba/svelte-popover";
  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="svelte-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">
// GENERATED from packages/demos/popover/default.demo.tsx — edit the source, not this file.
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>

// GENERATED from packages/demos/popover/default.demo.tsx — edit the source, not this file.
import { Popover } from "@pindoba/solid-popover";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";

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

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.

PreviewCode

---
// GENERATED from packages/demos/popover/arrow.demo.tsx — edit the source, not this file.
import Popover from "@pindoba/astro-popover";
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=&#123;false&#125;
  </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>

// GENERATED from packages/demos/popover/arrow.demo.tsx — edit the source, not this file.
import { Popover } from "@pindoba/react-popover";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function ArrowDemo() {
  return (
    <div
      className={stack({
        gap: "md",
        direction: "row",
        align: "center",
        flexWrap: "wrap",
      })}
    >
      <Popover
        id="react-demo-popover-arrow-on"
        title="Tethered"
        trigger={(triggerProps) => (
          <Button {...triggerProps}>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={(triggerProps) => (
          <Button {...triggerProps}>
            arrow={"{"}false{"}"}
          </Button>
        )}
      >
        No arrow — the panel reads as its own surface.
      </Popover>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/popover/arrow.demo.tsx — edit the source, not this file.
  import Popover from "@pindoba/svelte-popover";
  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="svelte-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="svelte-demo-popover-arrow-off" title="Untethered" arrow={false}>
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>arrow=&#123;false&#125;</Button>
    {/snippet}
    No arrow — the panel reads as its own surface.
  </Popover>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/popover/arrow.demo.tsx — edit the source, not this file.
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>

// GENERATED from packages/demos/popover/arrow.demo.tsx — edit the source, not this file.
import { Popover } from "@pindoba/solid-popover";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";

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

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

Placement

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

PreviewCode

---
// GENERATED from packages/demos/popover/placement.demo.tsx — edit the source, not this file.
import Popover from "@pindoba/astro-popover";
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>

// GENERATED from packages/demos/popover/placement.demo.tsx — edit the source, not this file.
import { Popover } from "@pindoba/react-popover";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

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

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

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

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

<script lang="ts">
  // GENERATED from packages/demos/popover/placement.demo.tsx — edit the source, not this file.
  import Popover from "@pindoba/svelte-popover";
  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="svelte-demo-popover-top" placement="top" title="Top">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Top</Button>
    {/snippet}
    Placed above the trigger.
  </Popover>

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

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

  <Popover id="svelte-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">
// GENERATED from packages/demos/popover/placement.demo.tsx — edit the source, not this file.
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>

// GENERATED from packages/demos/popover/placement.demo.tsx — edit the source, not this file.
import { Popover } from "@pindoba/solid-popover";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";

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

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

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

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

#Default

#Arrow

#Placement

Default

Arrow

Placement