Popover Component

For visual examples refer to Menu and Tooltip.

Popover uses Floating UI to automatically place an element relative to another element within the screen, and repositions it when the viewport size changes or the page scrolls.

Anatomy

<template>
  <PeachyPopover.Popover>
    <PeachyPopover.Trigger />

    <PeachyPopover.Target>
      <slot />
    </PeachyPopover.Target>
  </PeachyPopover.Popover>
</template>

<script lang="ts" setup>
  import { PeachyPopover } from "typeach";
</script>

A popover can be nested as many times as needed.

Props & Emits

Popover

Props

Name	Default	Type	Description
hover	false	boolean?	When set to true, the target will appear on hover and focus, rather than on click.

---

Trigger

Props

Name	Default	Type	Description
is	div	string?	The is attribute for the dynamic root component. Will only be applied if nonNative is true, as the popovertarget attribute is only supported by buttons.
nonNative*	false	boolean?	When set to true, the popovertarget attribute is not added to the element.
action	"toggle"	"toggle" "show" "hide"	Sets the popovertargetaction attribute.

NONNATIVE CAVEAT

If you're using nonNative and you want a gap between the Trigger and Target - to prevent the target disappearing when a user moves the cursor between them, you should create a wrapper element around the <slot /> which you can style with paddings to create an accessible gap.

Target

Props

Name	Default	Type	Description
is	"div"	string?	The is attribute for the dynamic root component.
modal	false	boolean?	When set to true, it sets the popover attribute to "manual", meaning clicking outside the popover and pressing Escape won't close the popover.
hardEscape	false	boolean?	When set to true, pressing Escape will close all parent popovers.
placement	"bottom"	Placement?	The placement option for Floating UI.

---

Exposed properties with ref

All the components - Popover, Trigger and Target use defineExpose, this means when you use a ref on them - the ref won't point to their elements but rather to the properties defined in the PopoverExpose type.

PopoverExpose

type PopoverExpose = {
  isOpen: DeepReadonly<Ref<boolean>>;
  targetId: DeepReadonly<Ref<string | undefined>>;

  hideAll(): void;
  hideChildren(): void;
  hideSiblings(): void;

  toggle(): void;
  show(): void;
  hide(): void;

  getTarget(): HTMLElement | undefined;
  getTrigger(): HTMLElement | undefined;
};

Usage

<template>
  <PeachyPopover.Popover ref="popover" />
</template>

<script lang="ts" setup>
  import { PeachyPopover, type PopoverExpose } from "typeach";

  const popover = ref<PopoverExpose>();
</script>