Popover

Smart-positioned popover with automatic fallback placement.

Live Demo

Usage

<template>
  <orio-popover position="bottom-left">
    <template #default="{ toggle }">
      <orio-button @click="toggle()"> Show Popover </orio-button>
    </template>

    <template #content="{ toggle }">
      <div class="popover-content">
        <p>Your content here</p>
        <orio-button variant="secondary" @click="toggle(false)">Close</orio-button>
      </div>
    </template>
  </orio-popover>
</template>

Props

Prop	Type	Default	Description
position	string	'bottom-left'	Popover position
offset	number	10	Distance from trigger (px)
disabled	boolean	false	Disable popover

Position Values

• Single: 'top', 'bottom', 'left', 'right'
• Combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom', 'right-top', 'right-bottom'

Slots

Slot	Props	Description
default	{ toggle }	Trigger element
content	{ toggle }	Popover content

Features

• Automatic viewport detection
• Fallback positioning if content doesn't fit
• Click outside to close
• Teleports to body
• Handles scroll/resize events