文字气泡 Tooltip

鼠标悬停或点击元素时弹出的文字提示气泡，用于辅助说明或简要信息展示。

基础用法

鼠标悬停在元素上时显示提示信息。

<template>
  <bp-tooltip content="文本信息" position="bottom">
    <bp-button>文字提示</bp-button>
  </bp-tooltip>
</template>

弹出位置

通过 position 属性设置弹出位置，支持 top（上方，默认）和 bottom（下方）。

<template>
  <bp-space :size="16">
    <bp-tooltip content="上方提示" position="top">
      <bp-button>上</bp-button>
    </bp-tooltip>
    <bp-tooltip content="下方提示" position="bottom">
      <bp-button>下</bp-button>
    </bp-tooltip>
  </bp-space>
</template>

主题

通过 theme 属性切换主题，支持 dark（深色，默认）和 light（浅色）两种风格。

<template>
  <bp-space :size="16">
    <bp-tooltip content="深色主题" theme="dark">
      <bp-button>Dark</bp-button>
    </bp-tooltip>
    <bp-tooltip content="浅色主题" theme="light">
      <bp-button>Light</bp-button>
    </bp-tooltip>
  </bp-space>
</template>

触发方式

通过 trigger 属性设置触发方式，支持 hover（悬停，默认）和 click（点击）。

<template>
  <bp-space :size="16">
    <bp-tooltip content="鼠标悬停触发" trigger="hover">
      <bp-button>Hover</bp-button>
    </bp-tooltip>
    <bp-tooltip content="点击触发" trigger="click">
      <bp-button>Click</bp-button>
    </bp-tooltip>
  </bp-space>
</template>

自定义内容

使用 content 插槽自定义提示内容，可展示更丰富的结构化信息。

<template>
  <bp-tooltip>
    <bp-button>自定义内容</bp-button>
    <template #content>
      <div class="custom-content">
        <p style="font-weight: 600">自定义标题</p>
        <p>这里可以放任意内容</p>
      </div>
    </template>
  </bp-tooltip>
</template>

<style lang="scss" scoped>
.custom-content {
  min-width: 120px;

  p {
    margin: 0;
    line-height: 1.8;
  }
}
</style>

Tooltip 属性

content	提示文本内容	String	-	-
trigger	触发方式	TriggerType	hover	-
theme	提示框主题风格	String	dark	-
position	弹出位置	String	top	-

Tooltip 插槽

default	触发弹出的元素	-	-
content	自定义提示内容	-	-