Tooltip 文字提示

警告提示，展现需要关注的信息。

何时使用

• 当某个页面需要向用户显示警告的信息时。
• 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

示例

基本用法

<template>
  <div id="demo-tooltips">
    <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
      <f-tooltip placement="topLeft">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>TL</f-button>
      </f-tooltip>
      <f-tooltip placement="top">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>Top</f-button>
      </f-tooltip>
      <f-tooltip placement="topRight">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>TR</f-button>
      </f-tooltip>
    </div>
    <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
      <f-tooltip placement="leftTop">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>LT</f-button>
      </f-tooltip>
      <f-tooltip placement="left">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>Left</f-button>
      </f-tooltip>
      <f-tooltip placement="leftBottom">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>LB</f-button>
      </f-tooltip>
    </div>
    <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24}px` }">
      <f-tooltip placement="rightTop">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>RT</f-button>
      </f-tooltip>
      <f-tooltip placement="right">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>Right</f-button>
      </f-tooltip>
      <f-tooltip placement="rightBottom">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>RB</f-button>
      </f-tooltip>
    </div>
    <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
      <f-tooltip placement="bottomLeft">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>BL</f-button>
      </f-tooltip>
      <f-tooltip placement="bottom">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>Bottom</f-button>
      </f-tooltip>
      <f-tooltip placement="bottomRight">
        <template #title>
          <span>prompt text</span>
        </template>
        <f-button>BR</f-button>
      </f-tooltip>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {
      buttonWidth: 70,
    }
  },
})
</script>
<style scoped>
#demo-tooltips .fs-btn {
  width: 70px;
  text-align: center;
  padding: 0;
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>

API

参数	说明	类型	默认值
title	提示文字	string|slot	无

共同的 API

以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。

参数	说明	类型	默认值
align	该值将合并到 placement 的配置中，设置参考 dom-align	Object	无
arrowPointAtCenter	箭头是否指向目标元素中心	boolean	false
autoAdjustOverflow	气泡被遮挡时自动调整位置	boolean	true
color	背景颜色	string	无
defaultVisible	默认是否显隐	boolean	false
destroyTooltipOnHide	隐藏后是否销毁 tooltip	boolean	false
getPopupContainer	浮层渲染父节点，默认渲染到 body 上	Function(triggerNode)	() => document.body
mouseEnterDelay	鼠标移入后延时多少才显示 Tooltip，单位：秒	number	0.1
mouseLeaveDelay	鼠标移出后延时多少才隐藏 Tooltip，单位：秒	number	0.1
overlayClassName	卡片类名	string	无
overlayStyle	卡片样式	object	无
placement	气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom	string	top
trigger	触发行为，可选 hover/focus/click/contextmenu	string	hover
visible(v-model)	用于手动控制浮层显隐	boolean	false

事件

事件名称	说明	回调参数
visibleChange	显示隐藏的回调	(visible) => void

注意

请确保 Tooltip 的子元素能接受 mouseenter、mouseleave、focus、click 事件。