Files
oa/documentation/plugins/popover/popover-position-documentation.md
2025-05-24 01:49:48 +09:00

4.0 KiB

Popover positions

<Tippy /> popovers can have different positions. Use the placement props to set your popover placement. Available options are top, top-end, bottom, bottom-end, left, left-end, right and right-end.

<template>
  <Tippy placement="top">
    <VButton>Top</VButton>
    <template #content>
      <div class="v-popover-content is-text">
        <div class="popover-head">
          <h4 class="dark-inverted">
            Top
          </h4>
        </div>
        <div class="popover-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </template>
  </Tippy>
</template>
Top

Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Top End

Top End

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bottom

Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bottom End

Bottom End

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Left

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Left End

Left End

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right

Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right End

Right End

Lorem ipsum dolor sit amet, consectetur adipiscing elit.