Popover 气泡卡片

气泡卡片用于在元素上提供额外的信息展示，适用于简单的工具提示不够用、但又不适合使用弹窗的场景。

基础用法

点击触发按钮，显示带标题和内容的气泡卡片。默认从上方弹出。

<TPopover title="气泡标题" content="这里是气泡卡片的内容区域。">
  <button class="btn">点击切换</button>
</TPopover>

四个方向

支持四种弹出方向：top（默认）、right、bottom、left。

查看代码

<TPopover placement="left" title="左侧" content="从左侧弹出">
  <button class="btn">Left</button>
</TPopover>
<TPopover placement="top" title="上方" content="从上方弹出">
  <button class="btn">Top</button>
</TPopover>
<TPopover placement="bottom" title="底部" content="从底部弹出">
  <button class="btn">Bottom</button>
</TPopover>
<TPopover placement="right" title="右侧" content="从右侧弹出">
  <button class="btn">Right</button>
</TPopover>

Hover 触发

设置 trigger="hover" 使气泡在鼠标悬停时显示，移出时隐藏。

<TPopover trigger="hover" title="Hover 触发" content="悬停到我上方即可看到气泡。">
  <button class="btn btn-primary">Hover 我</button>
</TPopover>

v-model 控制

通过 v-model 双向绑定控制气泡的显示与隐藏。

<script setup>
  import {ref} from 'vue'

  const showPopover = ref(false)
</script>

<template>
  <TPopover v-model="showPopover" title="受控模式" content="通过 v-model 控制显示/隐藏。">
    <button class="btn btn-outline-primary">控制</button>
  </TPopover>
  <button @click="showPopover = !showPopover">
    {{ showPopover ? '隐藏' : '显示' }}
  </button>
</template>

自定义内容

通过 #title 和 #content 插槽自定义气泡内容，支持传入图标或其他组件。

查看代码

<script setup>
  import {IconInfoCircle} from '@tabler/icons-vue'
</script>

<template>
  <TPopover placement="bottom">
    <template #title>
      <span class="d-flex align-items-center gap-1">
        <IconInfoCircle size="16"/>
        提示信息
      </span>
    </template>
    <template #content>
      <p class="mb-0">这是一段自定义内容，<br>支持换行和 HTML 结构。</p>
    </template>
    <button class="btn btn-info">自定义内容</button>
  </TPopover>
</template>

禁用状态

设置 disabled 属性禁用气泡交互。

<TPopover disabled title="禁用" content="这个气泡已被禁用。">
  <button class="btn btn-secondary">已禁用</button>
</TPopover>

API

Props

属性	类型	默认值	说明
modelValue	boolean	false	v-model 双向绑定，控制显示/隐藏
placement	'top' | 'right' | 'bottom' | 'left'	'top'	弹出方向
title	string	—	标题文字（可使用 #title 插槽自定义）
content	string	—	内容文字（可使用 #content 插槽自定义）
trigger	'click' | 'hover'	'click'	触发方式
disabled	boolean	false	是否禁用
teleportTo	string	'body'	Teleport 目标选择器

Slots

插槽	说明
default	触发元素（按钮、链接等）
title	气泡标题（自定义内容）
content	气泡内容（自定义内容）

Emits

事件	载荷	说明
update:modelValue	(value: boolean)	v-model 更新事件
open	—	气泡打开时触发
close	—	气泡关闭时触发