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

Avatar popover

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

<template>
  <Tippy>
    <VButton>Hover me!</VButton>
    <template #content>
      <div class="v-popover-content is-text">
        <div class="popover-head">
          <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
          <h4 class="dark-inverted">
            Alice C.
          </h4>
        </div>
        <div class="popover-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </template>
  </Tippy>
</template>

Hover me!

Alice C.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hover me!

Erik K.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hover me!

John L.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hover me!

Sara C.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.