oa/documentation/plugins/popover/popover-icon-documentation.md

Icon popover

Popovers can hold any type of content, including existing Vuero components. You can easily add a <VIconBox /> inside your popover.

<template>
  <Tippy>
    <VButton>Hover me!</VButton>
    <template #content>
      <div class="v-popover-content is-text">
        <div class="popover-head">
          <VIconBox size="small" color="primary">
            <i class="lnil lnil-crown-alt-1" />
          </VIconBox>
          <h4 class="dark-inverted">
            Hover Popover
          </h4>
        </div>
        <div class="popover-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </template>
  </Tippy>
</template>

Hover me!

Hover Popover

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hover me!

Hover Popover

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hover me!

Hover Popover

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hover me!

Hover Popover

Lorem ipsum dolor sit amet, consectetur adipiscing elit.