Popover

The Popover component displays a floating content element next to a trigger element. It is built on top of Floating UI and supports various positioning and interactions.

Installation

pnpm

pnpm i @vue-interface/popover

yarn

yarn add @vue-interface/popover

npm

npm i @vue-interface/popover

bun

bun i @vue-interface/popover

Basic Usage

The Popover component uses a default slot for content and a trigger slot for the element that toggles the popover. The trigger slot receives red, isOpen, open, close, and toggle methods/state.

<Popover>
    <template #trigger="{ ref, toggle, isOpen }">
        <button :ref="ref" class="btn" :class="{'btn-primary': !isOpen, 'btn-secondary': isOpen}" @click="toggle">
            Click me
        </button>
    </template>
    <div>This is a popover</div>
</Popover>

Placement