@inkline/inkline/src/components/IPopover/examples/trigger.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<i-popover trigger="click">
    <i-button>Click Popover</i-button>
    <template #header>
        Popover Header
    </template>
    <template #body>
        This is the popover body. Useful information goes here.
    </template>
    <template #footer>
        Popover Footer
    </template>
</i-popover>

<i-popover trigger="hover">
    <i-button>Hover Popover</i-button>
    <template #header>
        Popover Header
    </template>
    <template #body>
        This is the popover body. Useful information goes here.
    </template>
    <template #footer>
        Popover Footer
    </template>
</i-popover>

<i-popover trigger="focus">
    <i-button type="submit">Focus Popover</i-button>
    <template #header>
        Popover Header
    </template>
    <template #body>
        This is the popover body. Useful information goes here.
    </template>
    <template #footer>
        Popover Footer
    </template>
</i-popover>

<i-popover :trigger="['focus', 'hover']">
    <i-button>Multiple Events Popover</i-button>
    <template #header>
        Popover Header
    </template>
    <template #body>
        This is the popover body. Useful information goes here.
    </template>
    <template #footer>
        Popover Footer
    </template>
</i-popover>

<i-popover trigger="manual" v-model="visible">
    <i-button @click="visible = !visible">Manual Popover</i-button>
    <template #header>
        Popover Header
    </template>
    <template #body>
        This is the popover body. Useful information goes here.
    </template>
    <template #footer>
        Popover Footer
    </template>
</i-popover>