Chi-UI

Appearance

Tooltip 提示 ​

用于需要在特定元素周围弹出一下拓展信息。

代码示例 ​

基础用法 ​

最简单的用法。

<template>
  <chi-tooltip>
    <template #popper>一些提示的内容</template>
    <chi-button>气泡提示</chi-button>
  </chi-tooltip>
</template>

触发方式 ​

设置 trigger 属性的值可以改变提示的触发方式。

<template>
  <chi-space>
    <chi-tooltip placement="top" trigger="hover">
      <template #popper>一些提示的内容</template>
      <chi-button>悬停触发</chi-button>
    </chi-tooltip>
    <chi-tooltip placement="top" trigger="click">
      <template #popper>一些提示的内容</template>
      <chi-button>点击触发</chi-button>
    </chi-tooltip>
  </chi-space>
</template>

延时 ​

设置 open-delay 和 close-delay 属性的值可以指定气泡出现和消失的延迟毫秒数。

<template>
  <chi-space>
    <chi-tooltip :open-delay="1000">
      <template #popper>一些提示的内容</template>
      <chi-button>延迟出现</chi-button>
    </chi-tooltip>
    <chi-tooltip :close-delay="1000">
      <template #popper>一些提示的内容</template>
      <chi-button>延迟消失</chi-button>
    </chi-tooltip>
  </chi-space>
</template>

出现位置 ​

通过 placement 属性可以设置气泡出现的位置。

<template>
  <chi-space
    style="max-width: 500px; margin: 10px 0"
    v-for="(meta, index) in tooltipMeta"
    :justify="meta.justify"
    :key="index"
  >
    <template v-for="placement in meta.placements" :key="placement">
      <chi-tooltip reverse :placement="placement" trigger="click">
        <span style="padding: 0 5px">
          <chi-button style="max-width: 120px">{{ placement }}</chi-button>
        </span>
        <template #popper>{{ `The ${placement.split('-').join(' ')} text` }}</template>
      </chi-tooltip>
    </template>
  </chi-space>
</template>

<script setup>
const tooltipMeta = [
  { justify: 'center', placements: ['top-start', 'top', 'top-end'] },
  { justify: 'space-between', placements: ['left-start', 'right-start'] },
  { justify: 'space-between', placements: ['left', 'right'] },
  { justify: 'space-between', placements: ['left-end', 'right-end'] },
  { justify: 'center', placements: ['bottom-start', 'bottom', 'bottom-end'] },
]
</script>

无箭头 ​

添加 no-arrow 属性可以禁用箭头。

<template>
  <chi-tooltip no-arrow>
    <template #popper>没有箭头的气泡</template>
    <chi-button>气泡提示</chi-button>
  </chi-tooltip>
</template>

反色主题 ​

添加 reverse 属性可以启用反色主题。

<template>
  <chi-space>
    <chi-tooltip>
      <template #popper>一些提示的内容</template>
      <chi-button>原色主题</chi-button>
    </chi-tooltip>
    <chi-tooltip reverse>
      <template #popper>一些提示的内容</template>
      <chi-button>反色主题</chi-button>
    </chi-tooltip>
  </chi-space>
</template>

API ​

预设类型 ​

ts
type Placement =
  | 'top'
  | 'right'
  | 'bottom'
  | 'left'
  | 'top-start'
  | 'top-end'
  | 'right-start'
  | 'right-end'
  | 'bottom-start'
  | 'bottom-end'
  | 'left-start'
  | 'left-end'

Tooltip 属性 ​

名称类型说明默认值
closeDelaynumber设置气泡消失的延迟毫秒数0
noArrowboolean设置是否禁用箭头false
openDelaynumber设置气泡出现的延迟毫秒数0
placementPlacement提示出现的位置'top'
reverseboolean设置气泡是否为反色主题false
trigger'hover' | 'click'气泡的触发方式'hover'