Tooltip 文字提示

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

基本用法

使用 content 属性来决定 hover 时的提示信息。

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip
        content="hello tooltip"
    >
      <Button> 激活 Tooltip </Button>
    </Tooltip>
  </div>
</template>

不同位置

由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip
        content="hello tooltip"
        placement="top-start"
    >
      <Button> top-start </Button>
    </Tooltip>

    <Tooltip
        content="hello tooltip"
        placement="bottom-start"
    >
      <Button> bottom-start </Button>
    </Tooltip>

    <Tooltip
        content="hello tooltip"
        placement="left-start"
    >
      <Button> left-start </Button>
    </Tooltip>

    <Tooltip
        content="hello tooltip"
        placement="right-start"
    >
      <Button> right-start </Button>
    </Tooltip>
  </div>
</template>
<style scoped>
.vk-button {
  margin-right: 20px;
}
</style>

触发方式

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

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip
        content="hello tooltip"
        trigger="click"
    >
      <Button> 点击激活 Tooltip </Button>
    </Tooltip>
  </div>
</template>

更多内容的文字提示

展示多行文本或者是设置文本内容的格式

用具名 slot content，替代tooltip中的content属性。

<script setup>
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'
</script>
<template>
  <div class="basic block">
    <Tooltip
        trigger="click"
    >
      <Button> 复杂 HTML 结构的Tooltip </Button>
      <template #content>
        <h3> this is the title</h3>
        <p> this is the content </p>
      </template>
    </Tooltip>
  </div>
</template>

手动触发

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

<script setup>
import { ref } from 'vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import Button from '@/components/Button/Button.vue'

const tooltipRef = ref()
const open = () => {
  tooltipRef.value?.show()
}
const close = () => {
  tooltipRef.value?.hide()
}
</script>
<template>
  <div class="basic block">
    <Tooltip
        content="hello tooltip"
        ref="tooltipRef"
        manual
    >
      <Button> 手动容器 </Button>
    </Tooltip>

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

React 用法

import { useRef } from 'react'
import { Tooltip } from '@bobocn/element/react'
import type { TooltipInstance } from '@bobocn/element/react'
import '@bobocn/element/style.css'

// 基础用法
function App() {
  return (
    <Tooltip content="提示文字" placement="top">
      <button>悬停查看提示</button>
    </Tooltip>
  )
}

// 点击触发
<Tooltip content="点击触发" trigger="click">
  <button>点击</button>
</Tooltip>

// 自定义内容（contentSlot）
<Tooltip contentSlot={<div><p>多行内容</p><p>第二行</p></div>}>
  <button>悬停查看</button>
</Tooltip>

// 手动控制
const tooltipRef = useRef<TooltipInstance>(null)
<Tooltip content="手动控制" manual ref={tooltipRef}>
  <button>手动触发</button>
</Tooltip>
tooltipRef.current?.show()
tooltipRef.current?.hide()

API

属性 (Attributes)

属性名	说明	类型	默认值
content	显示的内容	string	—
trigger	触发方式	'hover' | 'click'	hover
placement	弹出位置	'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'	bottom
manual	是否手动控制	boolean	false
popperOptions	Popper.js 配置项	object	—
transition	过渡动画名	string	—
openDelay	打开延迟（毫秒）	number	0
closeDelay	关闭延迟（毫秒）	number	200

事件 (Events)

事件名	说明	回调参数
visible-change	Tooltip 显示/隐藏时触发	(visible: boolean) => void
click-outside	点击 Tooltip 外部时触发	() => void

插槽 (Slots)

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

方法 (Exposes)

方法名	说明	类型
show	手动显示 Tooltip	() => void
hide	手动隐藏 Tooltip	() => void