Tooltip | JView UI

气泡组件，用于展示一些辅助性信息。

基本展示

使用title属性指定气泡提示文字，也可以通过插槽定制。

鼠标放在这里会出现提示文字

展开查看代码

vue

<template>
    <j-tooltip title="十年磨一剑">
        <strong style="margin: 10px 0 40px; display: inline-block">鼠标放在这里会出现提示文字</strong>
    </j-tooltip>
</template>

<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>

<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>

<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>

<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>

<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	指定浮层的容器，默认渲染到 body 下；如需渲染到父级元素下，可返回 null	`() => null \| HTMLElement`	`() => document.body`	否
destroyWhenHide	控制隐藏后是否销毁浮层	`boolean`	无	否
mouseEnterDelay	鼠标移入后延时多少才显示 Tooltip，单位：秒	`number`	`0.1`	否
mouseLeaveDelay	鼠标移出后延时多少才隐藏 Tooltip，单位：秒	`number`	`0.1`	否
overlayClassName	浮层class	`string`	无	否
overlayStyle	浮层style	`CSSProperties`	无	否
overlayInnerStyle	浮层内容区style	`CSSProperties`	无	否
overlayColor	浮层背景颜色	`string`	无	否
trigger	触发方式	`"click"` \| `"hover"`	`'hover'`	否
arrowVisible	是否显示箭头	`boolean`	`true`	否
offsetOption	offset 配置	`OffsetOptions`	`12`	否

基本展示 ​

调整位置 ​

控制显示隐藏 ​

指定浮层的容器 ​

定制样式风格 ​

属性 ​

基本展示

调整位置

控制显示隐藏

指定浮层的容器

定制样式风格

属性