Tooltip 文字提示

常用于主动操作后的反馈提示。

基础用法

这里我们提供 9 种不同方向的展示方式。

<script setup>
import PfTooltip from '@/components/lib/Tooltip/src/Tooltip.vue'
import PfButton from '@/components/lib/Button/src/Button.vue'
</script>
<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Top Left prompts info"
        placement="top-start"
      >
        <pf-button>top-start</pf-button>
      </pf-tooltip>
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Top Center prompts info"
        placement="top"
      >
        <pf-button>top</pf-button>
      </pf-tooltip>
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Top Right prompts info"
        placement="top-end"
      >
        <pf-button>top-end</pf-button>
      </pf-tooltip>
    </div>
    <div class="row">
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Left Top prompts info"
        placement="left-start"
      >
        <pf-button>left-start</pf-button>
      </pf-tooltip>
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Right Top prompts info"
        placement="right-start"
      >
        <pf-button>right-start</pf-button>
      </pf-tooltip>
    </div>
    <div class="row">
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Left Center prompts info"
        placement="left"
      >
        <pf-button class="mt-3 mb-3">left</pf-button>
      </pf-tooltip>
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Right Center prompts info"
        placement="right"
      >
        <pf-button>right</pf-button>
      </pf-tooltip>
    </div>
    <div class="row">
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Left Bottom prompts info"
        placement="left-end"
      >
        <pf-button>left-end</pf-button>
      </pf-tooltip>
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Right Bottom prompts info"
        placement="right-end"
      >
        <pf-button>right-end</pf-button>
      </pf-tooltip>
    </div>
    <div class="row center">
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <pf-button>bottom-start</pf-button>
      </pf-tooltip>
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <pf-button>bottom</pf-button>
      </pf-tooltip>
      <pf-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <pf-button>bottom-end</pf-button>
      </pf-tooltip>
    </div>
  </div>
</template>

<style lang="css">
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>

触发方式

由 trigger 属性决定触发方式： hover | click, 默认为 hover

<script setup>
import PfTooltip from '@/components/lib/Tooltip/src/Tooltip.vue'
import PfButton from '@/components/lib/Button/src/Button.vue'
</script>
<template>
  <div class="md-4">
    <pf-tooltip content="hello tooltip" trigger="click">
      <pf-button>点击激活 Tooltip</pf-button>
    </pf-tooltip>
  </div>
</template>

更多内容的文字提示

展示多行文本或者是设置文本内容的格式。用具名 slot content，替代tooltip中的content属性。

<script setup>
import PfTooltip from '@/components/lib/Tooltip/src/Tooltip.vue'
import PfButton from '@/components/lib/Button/src/Button.vue'
</script>
<template>
  <div class="md-4">
    <pf-tooltip trigger="click">
      <pf-button>复杂 HTML 结构的Tooltip</pf-button>
      <template #content>
        <h3>this is the title</h3>
        <p>this is the content</p>
      </template>
    </pf-tooltip>
  </div>
</template>

手动关闭所有实例

将 manual 属性设置为 true 即可， 然后可以使用实例上面的 show 和 hide 方法打开关闭下拉菜单。

<script setup>
import { ref } from 'vue'
import PfTooltip from '@/components/lib/Tooltip/src/Tooltip.vue'
import PfButton from '@/components/lib/Button/src/Button.vue'
const tooltipRef = ref()
const open = () => {
  tooltipRef.value?.show()
}
const close = () => {
  tooltipRef.value?.hide()
}
</script>
<template>
  <div class="md-4">
    <pf-tooltip content="hello tooltip" ref="tooltipRef" manual>
      <pf-button>手动容器</pf-button>
    </pf-tooltip>

    <br />
    <br />
    <pf-button type="primary" @click="open">点击手动触发显示</pf-button>
    <pf-button type="danger" @click="close">点击手动触发隐藏</pf-button>
  </div>
</template>

Tooltip 属性

Name	Description	Type	Default
content	display content, can be overridden by slot#content	^[string]	''
placement	position of Tooltip	^[enum]'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'	bottom
popper-options	popper.js parameters	^[object]refer to popper.js doc	{}
open-delay	delay of appearance, in millisecond	^[number]	0
close-delay	delay of disappear, in millisecond	^[number]	200
trigger	How should the tooltip be triggered (to show)	^[enum]'hover' | 'click'	hover
manual	是否开启手动触发模式	^[boolean]`	false
transition	transition name	^[string]	''

Tooltip 事件

Name	Description	Type
visible-change	当 tooltip 展示/隐藏时被触发	boolean
click-outside	当点击到 Tooltip 外侧区域时被触发	boolean

Tooltip 插槽

Name	Description
default	Tooltip triggering & reference element
content	customize content

Tooltip 公共方法

Name	Description	Type
show	expose show function	^[Function](event?: Event | undefined) => void
hide	expose hide function	^[Function](event?: Event | undefined) => void