Popover

Last updated

2026-10-04 UTC

Demo

popover/demo.vue

<template>
  <YlfPopover side="bottom" align="start" aria-label="About YunLeFun">
    <template #trigger>
      <YlfButton variant="primary">
        Open popover
      </YlfButton>
    </template>

    <div class="flex flex-col gap-2">
      <p class="m-0 text-sm font-600">
        YunLeFun popover
      </p>
      <p class="m-0 text-sm op-70">
        Reka UI provides positioning, outside dismissal and focus. YunLeFun tokens define the appearance.
      </p>
    </div>
  </YlfPopover>
</template>

Popover uses Reka UI for positioning, outside dismissal and focus; appearance reads tokens.

Props

Prop	Description	Type	Default
v-model:open	Open state	boolean	false
side	Side / orientation	top | right | bottom | left	bottom
align	Alignment	start | center | end	center
portalTo	Existing overlay container within the theme	string | HTMLElement	ConfigProvider / body

Class, data/ARIA attributes and events forward to content. Reka manages association IDs. The default name associates with the trigger; use purpose describing trigger text. Place local portals inside the same theme boundary.

Slots

Name	Description
trigger	Trigger element (as-child)
default	Popover content