TPopover / 气泡卡片

Popover displays detailed content in a floating card triggered by click or hover. Supports title, body content, four directions, and Teleport rendering. / 气泡卡片通过点击或悬停触发，在浮动层展示详细内容，支持标题、正文、四个方向和 Teleport 渲染。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
modelValue	boolean	false	v-model visibility
title	string	—	Card title / 标题
content	string	—	Body text / 正文文字
placement	'top' | 'right' | 'bottom' | 'left'	'top'	Direction
trigger	'click' | 'hover'	'click'	Trigger method
disabled	boolean	false	Disabled
teleportTo	string	'body'	Teleport target

Events / 事件

Event	Description / 说明
@update:modelValue	v-model update
@open	Popover shown
@close	Popover hidden

Slots / 插槽

Slot	Description / 说明
default	Trigger element / 触发元素
title	Custom title (overrides title prop)
content	Custom content (overrides content prop)

Basic Usage / 基础用法

<script setup lang="ts">
import { TPopover } from '@gulcc/tabler-vue'
</script>

<template>
  <TPopover title="Title / 标题" content="Popover content / 气泡卡片内容">
    <TButton>Click me / 点击</TButton>
  </TPopover>
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TPopover } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Directions / 方向 -->
  <TPopover title="Top / 上方" content="Content" placement="top">
    <TButton size="sm">Top</TButton>
  </TPopover>
  <TPopover title="Right / 右侧" content="Content" placement="right">
    <TButton size="sm">Right</TButton>
  </TPopover>

  <!-- Hover trigger / 悬停触发 -->
  <TPopover title="Hover" content="Appears on hover / 悬停显示" trigger="hover">
    <span class="cursor-pointer">Hover me / 悬停</span>
  </TPopover>

  <!-- Rich content slots / 富文本内容 -->
  <TPopover trigger="click">
    <template #title>
      <div class="d-flex align-items-center gap-2">
        <strong>User Info / 用户信息</strong>
        <TBadge color="blue">VIP</TBadge>
      </div>
    </template>
    <template #content>
      <p>Email: user@example.com</p>
      <p>Role: Admin / 管理员</p>
    </template>
    <TButton>Show Info / 显示信息</TButton>
  </TPopover>
</template>

Tips / 避坑指南

• popover uses @floating-ui/vue for smart positioning — auto-flips when space is limited
• Uses <Teleport to="body"> — popover elements are rendered outside the current DOM tree
• When trigger="hover", popover appears on mouse enter and hides on leave
• The title and content props are for simple text; use named slots for rich HTML content