文字提示 Tooltip
悬浮提示,展现需要关注的信息
基本使用
我是提示内容
Show Code
vue
<template>
<n-tooltip :maxWidth="240">
<template #title>我是提示内容</template>
<n-button type="primary">悬浮</n-button>
</n-tooltip>
</template>
自定义样式
我是提示内容,我是提示内容,我是提示内容,我是提示内容
Show Code
vue
<template>
<n-tooltip :maxWidth="300" :fontSize="16" color="rgba(0, 0, 0, 0.85)" backgroundColor="#FFF">
<template #title>我是提示内容,我是提示内容,我是提示内容,我是提示内容</template>
<n-button type="primary">悬浮</n-button>
</n-tooltip>
</template>
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
maxWidth | 提示框内容最大宽度,单位px | number | 120 |
content | 展示的文本 | string | '暂无内容' |
title | 提示的文本 | string | '暂无提示' |
fontSize | 提示文本字体大小,单位px | number | 14 |
color | 提示文本字体颜色 | string | '#FFF' |
backgroundColor | 提示框背景色 | string | 'rgba(0,0,0,.85)' |