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

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

<i-popover placement="top">
    <i-button>Top 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 placement="bottom">
    <i-button>Bottom 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 placement="left">
    <i-button>Left 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 placement="right">
    <i-button>Right 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>