Popover

Click-to-toggle floating panel anchored to a button. The size prop (xs, sm, md, lg, xl) sets the trigger button and panel density.

Jump to API reference

Import

Vue

import { UiPopover } from '@ziyarago/ui/vue'

Default

Vue

<UiPopover label="Cancellation policy">
  Free cancellation up to 7 days before arrival.
</UiPopover>

Small trigger

Vue

<UiPopover label="Details" size="sm">
  Breakfast and airport transfer included.
</UiPopover>

Sizes

Vue

<UiPopover size="xs" label="Details">
  Breakfast and airport transfer included.
</UiPopover>

<UiPopover size="sm" label="Details">
  Breakfast and airport transfer included.
</UiPopover>

<UiPopover size="md" label="Details">
  Breakfast and airport transfer included.
</UiPopover>

<UiPopover size="lg" label="Details">
  Breakfast and airport transfer included.
</UiPopover>

<UiPopover size="xl" label="Details">
  Breakfast and airport transfer included.
</UiPopover>

API reference

Button that toggles a floating panel with arbitrary content; use for small forms and extra info next to a control.

Props

PropType and valuesDefaultDescription

labelstring—Text of the trigger button.

sizexssmmdlgxl'md'Scale of trigger button and panel padding.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultPanel content.

Notes

Open state is internal and toggled by the trigger. The panel closes on outside click and on Escape (focus returns to the trigger).