Popover

The popover component is used to display temporary information around an element. When the user interacts with the trigger element (click or hover), the popover will display the content at the specified position.

Basic Usage

The most basic usage of the popover.

在 github 中打开

展开代码

复制代码

<script lang="ts" setup>

</script>

<template>
  <ol-popover>
    <template #trigger>
      <ol-button>
        Popover
      </ol-button>
    </template>
    <ol-card class="border-none">
      <ol-card-header class="flex flex-col gap-2 p-1">
        <h4 class="!m-0">
          Buzz Lightyear
        </h4>
        <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
          To infinity and beyond🚀
        </p>
      </ol-card-header>
    </ol-card>
  </ol-popover>
</template>

<style>

</style>

Trigger Method

Use the trigger slot to define the trigger element, and the popover content can be any custom content.

在 github 中打开

展开代码

复制代码

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <div class="flex gap-2">
    <ol-popover trigger="hover">
      <template #trigger>
        <ol-button>
          Hover
        </ol-button>
      </template>
      <ol-card class="border-none">
        <ol-card-header class="flex flex-col gap-2 p-1">
          <h4 class="!m-0">
            Buzz Lightyear
          </h4>
          <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
            To infinity and beyond🚀
          </p>
        </ol-card-header>
      </ol-card>
    </ol-popover>
    <ol-popover trigger="click">
      <template #trigger>
        <ol-button>
          Click
        </ol-button>
      </template>
      <ol-card class="border-none">
        <ol-card-header class="flex flex-col gap-2 p-1">
          <h4 class="!m-0">
            Buzz Lightyear
          </h4>
          <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
            To infinity and beyond🚀
          </p>
        </ol-card-header>
      </ol-card>
    </ol-popover>
    <ol-popover trigger="manual" :show="show">
      <template #trigger>
        <ol-button @click="show = !show">
          Manual
        </ol-button>
      </template>
      <ol-card class="border-none">
        <ol-card-header class="flex flex-col gap-2 p-1">
          <h4 class="!m-0">
            Buzz Lightyear
          </h4>
          <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
            To infinity and beyond🚀
          </p>
        </ol-card-header>
        <ol-card-footer class="space-x-2 p-1">
          <ol-button type="primary" @click="show = false">
            confirm
          </ol-button>
          <ol-button type="secondary" @click="show = false">
            Close
          </ol-button>
        </ol-card-footer>
      </ol-card>
    </ol-popover>
  </div>
</template>

Arrow and Position

Use the placement attribute to define the position of the popover, and use the arrow attribute to define whether the arrow is displayed.

在 github 中打开

展开代码

复制代码

<template>
  <ol-popover trigger="click" placement="right" :arrow="false">
    <template #trigger>
      <ol-button>
        Click Me
      </ol-button>
    </template>
    <ol-card class="border-none">
      <ol-card-header class="flex flex-col gap-2 p-1">
        <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
          Who saw my arrow?
        </p>
      </ol-card-header>
    </ol-card>
  </ol-popover>
</template>

Animation Time

Use the duration attribute to define the animation time of the popover.

在 github 中打开

展开代码

复制代码

<template>
  <ol-popover :duration="2500">
    <template #trigger>
      <ol-button>
        Duration
      </ol-button>
    </template>
    <ol-card class="border-none">
      <ol-card-header class="flex flex-col gap-2 p-1">
        <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
          I am as fast as lightning
        </p>
      </ol-card-header>
    </ol-card>
  </ol-popover>
</template>

Offset

Use the offset attribute to define the offset of the popover.

在 github 中打开

展开代码

复制代码

<template>
  <ol-popover trigger="click" placement="right" :offset="480">
    <template #trigger>
      <ol-button>
        Offset
      </ol-button>
    </template>
    <ol-card class="border-none">
      <ol-card-header class="flex flex-col gap-2 p-1">
        <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
          Bye👋
        </p>
      </ol-card-header>
    </ol-card>
  </ol-popover>
</template>

Attributes

Attribute	Description	Type	Default
trigger	Trigger method	'hover' | 'click' | 'focus'	'click'
placement	Popover position	'top' | 'bottom' | 'left' | 'right'	'bottom'
arrow	Whether to display the arrow	boolean	false
duration	Animation duration (ms)	number	200

Slots

Slot Name	Description
trigger	Trigger element
default	Popover content