# Popover Examples (vue)

```vue
<template>
  <h1>DBPopover Documentation Examples</h1>
  <h2>1. Default Popover</h2>
  <DBPopover :trigger="<DBButton>Hover on me to open Popover</DBButton>">
    Use any HTML code here like e.g. a <code>button</code>:
    <button type="button">Test</button></DBPopover
  >
  <h2>2. Placement Variants</h2>
  <DBPopover placement="top" :trigger="<DBButton>Top Placement</DBButton>">
    Popover with top placement
  </DBPopover>
  <DBPopover
    placement="bottom"
    :trigger="<DBButton>Bottom Placement</DBButton>"
  >
    Popover with bottom placement
  </DBPopover>
  <h2>3. Delay Variants</h2>
  <DBPopover delay="fast" :trigger="<DBButton>Fast Delay</DBButton>">
    Popover with fast delay
  </DBPopover>
  <DBPopover delay="slow" :trigger="<DBButton>Slow Delay</DBButton>">
    Popover with slow delay
  </DBPopover>
  <h2>4. Animation</h2>
  <DBPopover :trigger="<DBButton>With Animation</DBButton>" :animation="true">
    Popover with animation
  </DBPopover>
  <DBPopover :trigger="<DBButton>No Animation</DBButton>" :animation="false">
    Popover without animation
  </DBPopover>
  <h2>5. Width Variants</h2>
  <DBPopover width="auto" :trigger="<DBButton>Auto Width</DBButton>">
    Popover with auto width
  </DBPopover>
  <DBPopover width="fixed" :trigger="<DBButton>Fixed Width</DBButton>">
    Popover with fixed width
  </DBPopover>
</template>

<script setup lang="ts">
import { DBButton } from "@db-ux/v-v-core-components";
import { DBPopover } from "@db-ux/v-v-core-components";
</script>
```