Tooltip 文字提示

文字提示，在鼠标 hover 时显示提示文字。

TIP

目前只是做了简单封装，待完善

基础用法

<template>
    <div class="tooltip-base-box">
        <div class="row center">
            <ec-tooltip class="box-item" content="Top Left prompts info" placement="top-start">
                <ec-button>top-start</ec-button>
            </ec-tooltip>
            <ec-tooltip class="box-item" content="Top Center prompts info" placement="top">
                <ec-button>top</ec-button>
            </ec-tooltip>
            <ec-tooltip class="box-item" content="Top Right prompts info" placement="top-end">
                <ec-button>top-end</ec-button>
            </ec-tooltip>
        </div>
        <div class="row">
            <ec-tooltip class="box-item" content="Left Top prompts info" placement="left-start">
                <ec-button>left-start</ec-button>
            </ec-tooltip>
            <ec-tooltip class="box-item" content="Right Top prompts info" placement="right-start">
                <ec-button>right-start</ec-button>
            </ec-tooltip>
        </div>
        <div class="row">
            <ec-tooltip class="box-item" content="Left Center prompts info" placement="left">
                <ec-button class="mt-3 mb-3">left</ec-button>
            </ec-tooltip>
            <ec-tooltip class="box-item" content="Right Center prompts info" placement="right">
                <ec-button>right</ec-button>
            </ec-tooltip>
        </div>
        <div class="row">
            <ec-tooltip class="box-item" content="Left Bottom prompts info" placement="left-end">
                <ec-button>left-end</ec-button>
            </ec-tooltip>
            <ec-tooltip class="box-item" content="Right Bottom prompts info" placement="right-end">
                <ec-button>right-end</ec-button>
            </ec-tooltip>
        </div>
        <div class="row center">
            <ec-tooltip class="box-item" content="Bottom Left prompts info" placement="bottom-start">
                <ec-button>bottom-start</ec-button>
            </ec-tooltip>
            <ec-tooltip class="box-item" content="Bottom Center prompts info" placement="bottom">
                <ec-button>bottom</ec-button>
            </ec-tooltip>
            <ec-tooltip class="box-item" content="Bottom Right prompts info" placement="bottom-end">
                <ec-button>bottom-end</ec-button>
            </ec-tooltip>
        </div>
    </div>
</template>

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

更多内容的文字提示

展示多行文本或者设置内容的格式 通过 content 插槽设置内容

<template>
    <ec-tooltip placement="top">
        <template #content> multiple lines<br />second line </template>
        <ec-button>Top center</ec-button>
    </ec-tooltip>
</template>

禁用状态

禁用状态，鼠标悬停无法触发文字提示。disabled 属性可以满足这个需求。

<script lang="ts" setup>
import { ref } from "vue";

const disabled = ref(false);
</script>

<template>
    <ec-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom">
        <ec-button @click="disabled = !disabled">click to {{ disabled ? "active" : "close" }} tooltip
            function</ec-button>
    </ec-tooltip>
</template>

Tooltip API

Props

Name	Description	Type	Default
content	提示文字	string	-
disabled	是否禁用	boolean	false
placement	弹出位置	string	bottom
trigger	触发方式	string	hover
manual	手动控制	boolean	false
popper-options	popper 配置	object 参考popper.js	{}
transition	动画	string	fade
show-timeout	显示延时	number	0
hide-timeout	隐藏延时	number	200

Events

Name	Description	Type
visible-change	显示隐藏状态改变时触发	(visible: boolean) => void
click-outside	点击外部时触发	() => void

Slots

Name	Description
default	默认插槽
content	内容插槽

Expose

Name	Description	Type
show	显示	() => void
hide	隐藏	() => void