first

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

@@ -0,0 +1,87 @@
+---
+user1:
+  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.
+user2:
+  avatar: /images/avatars/svg/vuero-1.svg
+  badge: /images/icons/flags/united-states-of-america.svg
+  username: Erik K.
+  location: Las Begas, NV
+  position: Product Manager
+  bio: This is a nice user description that we can use as demo content.
+user3:
+  avatar: https://media.cssninja.io/content/avatars/7.jpg
+  badge: /images/icons/flags/united-states-of-america.svg
+  username: Alice C.
+  location: Los Angeles, CA
+  position: Software Engineer
+  bio: 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.
+
+<!--code-->
+
+```vue
+<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>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div>
+  <Tippy class="mx-1" interactive :offset="[0, 30]">
+    <VAvatar :picture="frontmatter.user1.avatar" />
+    <template #content>
+      <UserPopoverContent :user="frontmatter.user1" />
+    </template>
+  </Tippy>
+
+  <Tippy class="mx-1" interactive :offset="[0, 30]">
+    <VAvatar :picture="frontmatter.user2.avatar" />
+    <template #content>
+      <UserPopoverContent :user="frontmatter.user2" />
+    </template>
+  </Tippy>
+
+  <Tippy class="mx-1" interactive :offset="[0, 30]">
+    <VAvatar :picture="frontmatter.user3.avatar" />
+    <template #content>
+      <UserPopoverContent :user="frontmatter.user3" />
+    </template>
+  </Tippy>
+</div>
+
+<!--/example-->