气泡组件，用于展示一些辅助性信息。
基本展示
使用title属性指定气泡提示文字，也可以通过插槽定制。
展开查看代码
vue
<template>
<j-tooltip title="十年磨一剑">
<strong style="margin: 10px 0 40px; display: inline-block">鼠标放在这里会出现提示文字</strong>
</j-tooltip>
</template>调整位置
使用placement属性指定气泡提示显示的位置。
展开查看代码
vue
<template>
<div style="width: 460px; max-width: 100%; margin: 50px auto 60px">
<j-space style="width: 100%; margin-top: 20px; justify-content: center">
<j-tooltip placement="top-start" title="Top Start">
<j-button>Top Start</j-button>
</j-tooltip>
<j-tooltip placement="top" title="Top">
<j-button>Top</j-button>
</j-tooltip>
<j-tooltip placement="top-end" title="Top End">
<j-button>Top End</j-button>
</j-tooltip>
</j-space>
<j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
<j-tooltip placement="left-start" title="Left Start">
<j-button>Left Start</j-button>
</j-tooltip>
<j-tooltip placement="right-start" title="Right Start">
<j-button>Right Start</j-button>
</j-tooltip>
</j-space>
<j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
<j-tooltip placement="left" title="Left">
<j-button>Left</j-button>
</j-tooltip>
<j-tooltip placement="right" title="Right">
<j-button>Right</j-button>
</j-tooltip>
</j-space>
<j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
<j-tooltip placement="left-end" title="Left End">
<j-button>Left End</j-button>
</j-tooltip>
<j-tooltip placement="right-end" title="Right End">
<j-button>Right End</j-button>
</j-tooltip>
</j-space>
<j-space style="width: 100%; margin-top: 20px; justify-content: center">
<j-tooltip placement="bottom-start" title="Bottom Start">
<j-button>Bottom Start</j-button>
</j-tooltip>
<j-tooltip placement="bottom" title="Bottom">
<j-button>Bottom</j-button>
</j-tooltip>
<j-tooltip placement="bottom-end" title="Bottom End">
<j-button>Bottom End</j-button>
</j-tooltip>
</j-space>
</div>
</template>控制显示隐藏
使用open属性控制气泡提示的显示和隐藏，仅在必要时使用，因为气泡组件内部已经有完善的控制逻辑。
展开查看代码
vue
<template>
<j-tooltip :open="open" placement="right" title="我出来了">
<strong style="margin: 20px 0; display: inline-block">众里寻他千百度</strong>
</j-tooltip>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
const open = ref(true)
let timer
onMounted(() => {
timer = setInterval(() => {
open.value = !open.value
}, 1000)
})
onBeforeUnmount(() => {
clearInterval(timer)
})
</script>指定浮层的容器
使用getPopupContainer属性指定浮层的容器，getPopupContainer是一个函数，你需要返回一个 HTMLElement，默认是 document.body。
对于弹出层而言，它的容器显得很重要，因为z-index会受到容器的限制，fixed定位也会受父级元素的transform等属性的影响。因此，document.body 是绝佳的弹层容器。
当你希望浮层与触发元素在同一 DOM 层级时，指定getPopupContainer函数返回 null 即可，使用时可观察 DOM 结构的差异。
展开查看代码
vue
<template>
<j-tooltip title="十年磨一剑" :getPopupContainer="() => null">
<strong style="margin: 10px 0 40px; display: inline-block">愿与你同在！</strong>
</j-tooltip>
</template>定制样式风格
使用overlayColor属性控制浮层的背景颜色。
使用overlayClassName可以指定浮层的class，然后通过class对应的样式进行定制。
使用overlayStyle和overlayInnerStyle可分别定制浮层和内容区的样式。
展开查看代码
vue
<template>
<div style="width: 460px; max-width: 100%; margin: 50px auto 60px">
<j-space style="width: 100%; margin-top: 20px; justify-content: center">
<j-tooltip placement="top-start" title="Top Start" overlayColor="red">
<j-button>Red</j-button>
</j-tooltip>
<j-tooltip placement="top" title="Top" overlayColor="orange">
<j-button>Orange</j-button>
</j-tooltip>
<j-tooltip placement="top-end" title="Top End" overlayColor="#fadb14">
<j-button>Yellow</j-button>
</j-tooltip>
</j-space>
<j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
<j-tooltip placement="left-start" title="Left Start" overlayColor="green">
<j-button>Green</j-button>
</j-tooltip>
<j-tooltip placement="right-start" title="Right Start" overlayColor="#13c2c2">
<j-button>Cyan</j-button>
</j-tooltip>
</j-space>
<j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
<j-tooltip placement="left" title="Left" overlayColor="#1677ff">
<j-button>Blue</j-button>
</j-tooltip>
<j-tooltip placement="right" title="Right" overlayColor="purple">
<j-button>Purple</j-button>
</j-tooltip>
</j-space>
<j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
<j-tooltip placement="left-end" title="Left End" overlayColor="#faad14">
<j-button>Gold</j-button>
</j-tooltip>
<j-tooltip placement="right-end" title="Right End" overlayColor="#fa541c">
<j-button>Volcano</j-button>
</j-tooltip>
</j-space>
<j-space style="width: 100%; margin-top: 20px; justify-content: center">
<j-tooltip placement="bottom-start" title="Bottom Start" overlayColor="#108ee9">
<j-button>#108ee9</j-button>
</j-tooltip>
<j-tooltip placement="bottom" title="Bottom" overlayColor="#87d068">
<j-button>#87d068</j-button>
</j-tooltip>
<j-tooltip placement="bottom-end" title="Bottom End" overlayColor="#2db7f5">
<j-button>#2db7f5</j-button>
</j-tooltip>
</j-space>
</div>
</template>属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| title | 提示文字，支持字符串/属性/插槽 | string | VNode | 无 | 否 |
| disabled | 禁止弹出浮层 | boolean | 无 | 否 |
| placement | 浮层位置，可选top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end | Placement | 'bottom' | 否 |
| open | 控制浮层显隐，支持 v-model，仅在必要时使用 open | boolean | undefined | 否 |
| getPopupContainer | ssr时，默认渲染到父级元素下；可指定浮层的容器，比如渲染到 body 下 | () => undefined | HTMLElement | 无 | 否 |
| destroyWhenHide | 控制隐藏后是否销毁浮层 | boolean | 无 | 否 |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | 否 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | 否 |
| overlayClassName | 浮层class | string | 无 | 否 |
| overlayStyle | 浮层style | CSSProperties | 无 | 否 |
| overlayInnerStyle | 浮层内容区style | CSSProperties | 无 | 否 |
| overlayColor | 浮层背景颜色 | string | 无 | 否 |
| trigger | 触发方式 | "hover" | "click" | 'hover' | 否 |
| arrowVisible | 是否显示箭头 | boolean | true | 否 |
| offsetOption | offset 配置 | OffsetOptions | 12 | 否 |