Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

基础用法

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

使用 content 属性来决定 hover 时的提示信息。由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

<script lang="ts" setup>
import SiTooltip from '@/components/Tooltip/Tooltip.vue'
import SiButton from '@/components/Button/Button.vue'
</script>

<template>
  <div>
    <div class="tooltip-base-box">
      <div class="row center">
        <SiTooltip
          class="box-item"
          content="Top Left prompts info"
          placement="top-start"
        >
          <SiButton>top-start</SiButton>
        </SiTooltip>
        <SiTooltip
          class="box-item"
          content="Top Center prompts info"
          placement="top"
        >
          <SiButton>top</SiButton>
        </SiTooltip>
        <SiTooltip
          class="box-item"
          content="Top Right prompts info"
          placement="top-end"
        >
          <SiButton>top-end</SiButton>
        </SiTooltip>
      </div>
      <div class="row">
        <SiTooltip
          class="box-item"
          content="Left Top prompts info"
          placement="left-start"
        >
          <SiButton>left-start</SiButton>
        </SiTooltip>
        <SiTooltip
          class="box-item"
          content="Right Top prompts info"
          placement="right-start"
        >
          <SiButton>right-start</SiButton>
        </SiTooltip>
      </div>
      <div class="row">
        <SiTooltip
          class="box-item"
          content="Left Center prompts info"
          placement="left"
        >
          <SiButton class="mt-3 mb-3">
            left
          </SiButton>
        </SiTooltip>
        <SiTooltip
          class="box-item"
          content="Right Center prompts info"
          placement="right"
        >
          <SiButton>right</SiButton>
        </SiTooltip>
      </div>
      <div class="row">
        <SiTooltip
          class="box-item"
          content="Left Bottom prompts info"
          placement="left-end"
        >
          <SiButton>left-end</SiButton>
        </SiTooltip>
        <SiTooltip
          class="box-item"
          content="Right Bottom prompts info"
          placement="right-end"
        >
          <SiButton>right-end</SiButton>
        </SiTooltip>
      </div>
      <div class="row center">
        <SiTooltip
          class="box-item"
          content="Bottom Left prompts info"
          placement="bottom-start"
        >
          <SiButton>bottom-start</SiButton>
        </SiTooltip>
        <SiTooltip
          class="box-item"
          content="Bottom Center prompts info"
          placement="bottom"
        >
          <SiButton>bottom</SiButton>
        </SiTooltip>
        <SiTooltip
          class="box-item"
          content="Bottom Right prompts info"
          placement="bottom-end"
        >
          <SiButton>bottom-end</SiButton>
        </SiTooltip>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tooltip-base-box {
  width: 600px;
}
.row {
  display: flex;
  justify-content: space-between;
}
.center {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.box-item {
  margin: 10px 10px;
}
</style>

支持点击触发

<script lang="ts" setup>
import SiTooltip from '@/components/Tooltip/Tooltip.vue'
import SiButton from '@/components/Button/Button.vue'
</script>

<template>
  <div>
    <div class="tooltip-base-box">
      <SiTooltip
        class="box-item"
        placement="top"
        trigger="click"
      >
        <template #content>
          multiple lines<br>second line
        </template>
        <SiButton>click me</SiButton>
      </SiTooltip>
    </div>
  </div>
</template>

支持手动触发

<script lang="ts" setup>
import { ref } from 'vue'
import SiTooltip from '@/components/Tooltip/Tooltip.vue'
import SiButton from '@/components/Button/Button.vue'
import type { TooltipInstance } from '@/components/Tooltip/type.ts'

const tooltipRef = ref<TooltipInstance | null>(null)

function open() {
  tooltipRef.value?.show()
}
function close() {
  tooltipRef.value?.hide()
}
</script>

<template>
  <div>
    <div class="tooltip-base-box">
      <SiTooltip
        ref="tooltipRef"
        class="box-item"
        placement="top"
        manual
      >
        <template #content>
          multiple lines<br>second line
        </template>
        <SiButton>top</SiButton>
      </SiTooltip>
    </div>
    <div>
      <SiButton @click="open">
        open
      </SiButton>
      <SiButton @click="close">
        close
      </SiButton>
    </div>
  </div>
</template>

<style>
  .box-item {
  margin-bottom: 20px;
}
</style>

API

Attributes

| 名称 | 说明 | 类型 | 默认值 | | :------------- | :----------------------------------------------- | :--------------------------------------------------------------- | :------ | ----- | | content | 显示的内容，也可被 slot#content 覆盖 | string | '' | | placement | Tooltip 组件出现的位置 | enum | bottom | | disabled | Tooltip 组件是否禁用 | boolean | false | | popper-options | popper.js 参数 | object 请参考 popper.js 文档 | {} | | open-delay | 在触发后多久显示内容，单位毫秒 | number | 200 | | close-delay | 延迟关闭，单位毫秒 | number | 200 | | trigger | 如何触发 Tooltip | hover | click | hover | | manual | 是否手动触发 | boolean | false |

Slots

插槽名	说明
default	Tooltip 触发 & 引用的元素
content	自定义内容

Exposes

名称	详情	类型
contentRef	si-tooltip 组件实例	`object`
show	show方法控制 si-tooltip 显示状态	`Function`
hide	hide方法控制 si-tooltip 显示状态	`Function`

Tooltip 文字提示 ​

基础用法 ​

更多内容的文字提示 ​

支持点击触发 ​

支持手动触发 ​

API ​

Attributes ​

Slots ​

Exposes ​