Popover
A floating panel that appears on hover or click, used to display contextual content related to a trigger element.
Component
Props
| Props | Default | Type |
|---|---|---|
position | Position.TOP | Position |
align | Align.CENTER | Align |
trigger | Trigger.HOVER | Trigger |
popoverClass | min-w-[300px] | string | string[] |
Usage
position
Determines the vertical position of the popover. Uses the Position enum.
<template>
<Popover
position="Position.TOP"
>
<template #content>
...
</template>
<template #activator>
<ActionButton />
</template>
</Popover>
</template>
Options
| Value | Description |
|---|---|
TOP | The popover will be positioned at the top of the activator. |
BOTTOM | The popover will be positioned at the bottom of the activator. |
align
Sets the horizontal position of the popover. Uses the Align enum.
<template>
<Popover
align="Align.LEFT"
>
<template #content>
...
</template>
<template #activator>
<ActionButton />
</template>
</Popover>
</template>
| Value | Description |
|---|---|
LEFT | The popover will be positioned at the left border of the activator |
CENTER | The popover will be positioned at the center of the activator |
RIGHT | The popover will be positioned at the right border of the activator |
trigger
Configures the trigger for the popover. Uses the Trigger enum.
<template>
<Popover
trigger="Trigger.CLICK"
>
<template #content>
...
</template>
<template #activator>
<ActionButton />
</template>
</Popover>
</template>
Options
| Value | Description |
|---|---|
CLICK | The floating panel will appear when clicking on the activator item. |
HOVER | The floating panel will appear when hovering over the activator item. |
popoverClass
Can be used to override the popover's card class.
<template>
<Popover
popoverClass="min-w-[400px]"
>
<template #content>
...
</template>
<template #activator>
<ActionButton />
</template>
</Popover>
</template>