Vue Interface

Appearance

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 ​

bash
pnpm i @vue-interface/popover
bash
yarn add @vue-interface/popover
bash
npm i @vue-interface/popover
bash
bun i @vue-interface/popover

Tailwind Setup ​

css
@import '@vue-interface/popover/index.css';

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.

html
<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 ​

The placement prop determines where the popover appears relative to its trigger element. You can set it to values like "top", "left", "right", or "bottom" to control the popover's alignment.

Show Code
html
<Popover placement="top">
    <template #trigger="{ ref, toggle, isOpen }">
        <button :ref="ref" class="btn" :class="{'btn-primary': !isOpen, 'btn-secondary': isOpen}" @click="toggle">
            Top
        </button>
    </template>
    <div>Top aligned popover</div>
</Popover>
<Popover placement="left">
    <template #trigger="{ ref, toggle, isOpen }">
        <button :ref="ref" class="btn" :class="{'btn-primary': !isOpen, 'btn-secondary': isOpen}" @click="toggle">
            Left
        </button>
    </template>
    <div>Left aligned popover</div>
</Popover>
<Popover placement="right">
    <template #trigger="{ ref, toggle, isOpen }">
        <button :ref="ref" class="btn" :class="{'btn-primary': !isOpen, 'btn-secondary': isOpen}" @click="toggle">
            Right
        </button>
    </template>
    <div>Right aligned popover</div>
</Popover>
<Popover placement="bottom">
    <template #trigger="{ ref, toggle, isOpen }">
        <button :ref="ref" class="btn" :class="{'btn-primary': !isOpen, 'btn-secondary': isOpen}" @click="toggle">
            Bottom
        </button>
    </template>
    <div>Bottom aligned popover</div>
</Popover>