ToolTip 文字提示

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

基础用法

<template>
    <LiToolTip title="测试">
        <LiButton>hover</LiButton>
    </LiToolTip>
</template>
<script setup lang="ts">

</script>
<style scope lang="scss"></style>

触发方式

使用trigger控制

<template>
    <LiToolTip title="测试">
        <LiButton>hover</LiButton>
    </LiToolTip>
    <LiToolTip title="测试" trigger="click">
        <LiButton>click</LiButton>
    </LiToolTip>
    <LiToolTip title="测试" trigger="contextmenu">
        <LiButton>contextmenu</LiButton>
    </LiToolTip>
</template>
<script setup lang="ts">

</script>
<style scope lang="scss"></style>

标题

使用title控制

<template>
    <LiToolTip title="测试">
        <LiButton>hover</LiButton>
    </LiToolTip>
    <LiToolTip :title="c">
        <LiButton>hover</LiButton>
    </LiToolTip>
</template>
<script setup lang="ts">
    import { computed } from 'vue';
    const c = computed(() => "测试" + Date.now())
</script>
<style scope lang="scss"></style>

禁用

使用disabled控制

<template>
    <LiToolTip title="测试" :disabled="disabled">
        <LiButton @click="handleClick">{{ !disabled ? '可显示' : '不能显示' }}</LiButton>
    </LiToolTip>
</template>
<script setup lang="ts">
    import { ref } from 'vue';

    const disabled = ref(false)
    const handleClick = () => disabled.value = !disabled.value
</script>
<style scope lang="scss"></style>

自定义显示

使用show控制

<template>
    <LiToolTip title="测试" :show="show">
        <LiButton @click="handleToggle">切换</LiButton>
    </LiToolTip>
</template>
<script setup lang="ts">
    import { ref } from 'vue';

    const show = ref(false)
    const handleToggle = () => show.value = !show.value
</script>
<style scope lang="scss"></style>

自定义内容

使用title插槽控制

<template>
    <LiToolTip title="测试" :disabled="disabled">
        <template #title>
            自定义标题
        </template>
        <LiButton @click="handleClick">{{ !disabled ? '可显示' : '不能显示' }}</LiButton>
    </LiToolTip>
</template>
<script setup lang="ts">
    import { ref } from 'vue';

    const disabled = ref(false)
    const handleClick = () => disabled.value = !disabled.value
</script>
<style scope lang="scss"></style>

ToolTip Attributes

参数	说明	类型	可选值	默认值
title	标题	string		``
show	自定义显示	boolean		undefined
disabled	禁用	boolean		false
trigger	触发方式	string	hover / click / contextmenu	hover

ToolTip Slots

插槽名	作用域参数	说明
title		标题