Tooltip 文字提示

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

基本使用

通过 NueTooltip 标签生成提示信息。

通过 content 属性设置提示内容。

通过 placement 属性设置提示位置。可选值为 top-start、top-enter、top-end、bottom-start、bottom-center、bottom-end、left-start、left-center、left-end、right-start、right-center、right-end。上述值可以总结为
[direction:top|bottom|left|right]-[alignment:start|center|end]， 其中 direction 表示提示框出现的位置，alignment 表示提示框相对于触发元素的对齐方式。

<template>
    <nue-div vertical>
        <nue-div align="center" justify="center">
            <nue-tooltip
                content="Content of top-start tooltip"
                placement="top-start"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
            <nue-tooltip
                content="Content of top-center tooltip"
                placement="top-center"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
            <nue-tooltip
                content="Content of top-end tooltip"
                placement="top-end"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
        </nue-div>
        <nue-div align="center" justify="space-between">
            <nue-tooltip
                content="Content of left-start tooltip"
                placement="left-start"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
            <nue-tooltip
                content="Content of right-start tooltip"
                placement="right-start"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
        </nue-div>
        <nue-div align="center" justify="space-between">
            <nue-tooltip
                content="Content of left-center tooltip"
                placement="left-center"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
            <nue-tooltip
                content="Content of right-center tooltip"
                placement="right-center"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
        </nue-div>
        <nue-div align="center" justify="space-between">
            <nue-tooltip
                content="Content of left-end tooltip"
                placement="left-end"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
            <nue-tooltip
                content="Content of right-end tooltip"
                placement="right-end"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
        </nue-div>
        <nue-div align="center" justify="center">
            <nue-tooltip
                content="Content of bottom-start tooltip"
                placement="bottom-start"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
            <nue-tooltip
                content="Content of bottom-center tooltip"
                placement="bottom-center"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
            <nue-tooltip
                content="Content of bottom-end tooltip"
                placement="bottom-end"
            >
                <nue-button>Button</nue-button>
            </nue-tooltip>
        </nue-div>
    </nue-div>
</template>

插槽 #content

通过 #content 插槽可以自定义提示的内容。

TIP

要注意的是，提示元素在内部设定了最大宽度为视口宽度的 36%，因此当插槽中的文本在过长时会自动换行，如果需要自定义宽度时，请使用 theme 属性应用自定义样式。theme 属性的使用方式会在后面的小节中作出说明。

<template>
    <nue-div>
        <nue-tooltip placement="right-start">
            <template #content>
                <nue-text size="12px" color="white">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Nemo laboriosam aperiam eius ab, quibusdam sit odit totam
                    libero. Odit facere minus, deleniti
                    <nue-link icon="connection" href="https://www.baidu.com">
                        Baidu
                    </nue-link>
                    repudiandae nam eligendi quasi consequuntur saepe ipsa
                    asperiores. Ratione doloribus accusantium amet!🤣🤣🤣
                </nue-text>
            </template>
            <nue-button>Button</nue-button>
        </nue-tooltip>
    </nue-div>
</template>

大小

通过 size 属性设置提示元素的大小，接受 String 类型，可选值为 small 和 large，不设置则为正常大小。

<template>
    <nue-div align="center">
        <nue-tooltip content="Small" size="small">
            <nue-button>small</nue-button>
        </nue-tooltip>
        <nue-tooltip content="Normal">
            <nue-button>normal</nue-button>
        </nue-tooltip>
        <nue-tooltip content="Large" size="large">
            <nue-button>large</nue-button>
        </nue-tooltip>
    </nue-div>
</template>

自定义主题

通过 theme 属性自定义提示元素的样式。

TIP

要注意的是，提示元素在内部实现时使用了 Vue3 的 teleport 特性，因此使用自定义主题时需要将自定义的 CSS 片段设置到全局上才能够生效。

<template>
    <nue-div class="vp-raw">
        <nue-tooltip
            content="https://www.baidu.com"
            theme="custom"
            placement="right-center"
        >
            <nue-link href="https://www.baidu.com">Baidu</nue-link>
        </nue-tooltip>
    </nue-div>
</template>

<style>
    .nue-tooltip--custom {
        background: linear-gradient(to right, #ff416c, #ff4b2b);
        color: #fff;
        padding: 4px 16px;
        border-radius: 99px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
</style>