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

user1, user2, user3

user1	user2	user3
avatar badge username location position bio https://media.cssninja.io/content/avatars/19.jpg /images/icons/flags/germany.svg Greta K. Los Angeles, CA Sales Manager This is a nice user description that we can use as demo content.	avatar badge username location position bio /images/avatars/svg/vuero-1.svg /images/icons/flags/united-states-of-america.svg Erik K. Las Begas, NV Product Manager This is a nice user description that we can use as demo content.	avatar badge username location position bio https://media.cssninja.io/content/avatars/7.jpg /images/icons/flags/united-states-of-america.svg Alice C. Los Angeles, CA Software Engineer This is a nice user description that we can use as demo content.

Profile popover

Popovers can be used to display more complex information like a user profile. We-ve provided an example that uses an internal component to display a user profile. You can also make the popover interactive with the interactive prop.

<script setup lang="ts">
const user = {
  avatar: 'https://media.cssninja.io/content/avatars/19.jpg',
  badge: '/images/icons/flags/germany.svg',
  username: 'Greta K.',
  location: 'Los Angeles, CA',
  position: 'Sales Manager',
  bio: 'This is a nice user description that we can use as demo content.',
}
</script>

<template>
  <Tippy
    class="has-help-cursor"
    interactive
    :offset="[0, 30]"
  >
    <VAvatar :picture="user.avatar" />
    <template #content>
      <UserPopoverContent :user="user" />
    </template>
  </Tippy>
</template>