Tu View PlusTooltip 文字气泡
鼠标悬停、聚焦或点击在某个组件时，弹出的文字提示。
基本用法
鼠标移入，气泡出现，鼠标移出，气泡消失。
<template>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>显示单行文字</tu-button>
</tu-tooltip>
<tu-tooltip>
<template #content>
<div>渭城朝雨浥轻尘，客舍青青柳色新。</div>
<div>劝君更尽一杯酒，西出阳关无故人。</div>
</template>
<tu-button>显示多行文字</tu-button>
</tu-tooltip>
</template><template>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>显示单行文字</tu-button>
</tu-tooltip>
<tu-tooltip>
<template #content>
<div>渭城朝雨浥轻尘，客舍青青柳色新。</div>
<div>劝君更尽一杯酒，西出阳关无故人。</div>
</template>
<tu-button>显示多行文字</tu-button>
</tu-tooltip>
</template>自定义背景颜色
通过 background-color 属性自定义背景颜色。
<template>
<tu-tooltip
content="渭城朝雨浥轻尘，客舍青青柳色新。"
background-color="#2a3c85"
>
<tu-button>深蓝</tu-button>
</tu-tooltip>
<tu-tooltip
content="渭城朝雨浥轻尘，客舍青青柳色新。"
background-color="#007a45"
>
<tu-button>碧绿</tu-button>
</tu-tooltip>
<tu-tooltip
content="渭城朝雨浥轻尘，客舍青青柳色新。"
background-color="#800440"
>
<tu-button>品红</tu-button>
</tu-tooltip>
</template><template>
<tu-tooltip
content="渭城朝雨浥轻尘，客舍青青柳色新。"
background-color="#2a3c85"
>
<tu-button>深蓝</tu-button>
</tu-tooltip>
<tu-tooltip
content="渭城朝雨浥轻尘，客舍青青柳色新。"
background-color="#007a45"
>
<tu-button>碧绿</tu-button>
</tu-tooltip>
<tu-tooltip
content="渭城朝雨浥轻尘，客舍青青柳色新。"
background-color="#800440"
>
<tu-button>品红</tu-button>
</tu-tooltip>
</template>位置
文字气泡支持 12 个不同的方位。设置 tu-tooltip 元素属性的 position 值为 `tl` `top` `tr` `bl` `bottom` `br` `lt` `left` `lb` `rt` `right` `rb`来配置方位。
<template>
<div :style="{ position: 'relative', width: '440px', height: '280px' }">
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="tl">
<tu-button style="position: absolute; top: 0; left: 90px">
上左
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="top">
<tu-button style="position: absolute; top: 0; left: 180px">
上方
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="tr">
<tu-button style="position: absolute; top: 0; left: 280px">
上右
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="bl">
<tu-button style="position: absolute; top: 240px; left: 80px">
下左
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="bottom">
<tu-button style="position: absolute; top: 240px; left: 180px">
下方
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="br">
<tu-button style="position: absolute; top: 240px; left: 280px">
下右
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="lt">
<tu-button style="position: absolute; top: 60px; left: 10px">
左上
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="left">
<tu-button style="position: absolute; top: 120px; left: 10px">
左方
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="lb">
<tu-button style="position: absolute; top: 180px; left: 10px">
左下
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="rt">
<tu-button style="position: absolute; top: 60px; left: 350px">
右上
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="right">
<tu-button style="position: absolute; top: 120px; left: 350px">
右方
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="rb">
<tu-button style="position: absolute; top: 180px; left: 350px">
右下
</tu-button>
</tu-tooltip>
</div>
</template><template>
<div :style="{ position: 'relative', width: '440px', height: '280px' }">
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="tl">
<tu-button style="position: absolute; top: 0; left: 90px">
上左
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="top">
<tu-button style="position: absolute; top: 0; left: 180px">
上方
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="tr">
<tu-button style="position: absolute; top: 0; left: 280px">
上右
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="bl">
<tu-button style="position: absolute; top: 240px; left: 80px">
下左
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="bottom">
<tu-button style="position: absolute; top: 240px; left: 180px">
下方
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="br">
<tu-button style="position: absolute; top: 240px; left: 280px">
下右
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="lt">
<tu-button style="position: absolute; top: 60px; left: 10px">
左上
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="left">
<tu-button style="position: absolute; top: 120px; left: 10px">
左方
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="lb">
<tu-button style="position: absolute; top: 180px; left: 10px">
左下
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="rt">
<tu-button style="position: absolute; top: 60px; left: 350px">
右上
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="right">
<tu-button style="position: absolute; top: 120px; left: 350px">
右方
</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。" position="rb">
<tu-button style="position: absolute; top: 180px; left: 350px">
右下
</tu-button>
</tu-tooltip>
</div>
</template>气泡尺寸
tu-tooltip 组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：`large` `small` `mini`，通过设置 size 属性来配置它们，以适用不同场景。
<template>
<tu-tooltip size="mini" content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>超小</tu-button>
</tu-tooltip>
<tu-tooltip size="small" content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>较小</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>中等</tu-button>
</tu-tooltip>
<tu-tooltip size="large" content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>较大</tu-button>
</tu-tooltip>
</template><template>
<tu-tooltip size="mini" content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>超小</tu-button>
</tu-tooltip>
<tu-tooltip size="small" content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>较小</tu-button>
</tu-tooltip>
<tu-tooltip content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>中等</tu-button>
</tu-tooltip>
<tu-tooltip size="large" content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>较大</tu-button>
</tu-tooltip>
</template>Tooltip API
Tooltip Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 文字气泡是否可见 | Boolean | - |
| default-popup-visible | 文字气泡默认是否可见（非受控模式） | Boolean | false |
| content | 文字气泡内容 | String | - |
| position | 弹出位置 | String | top |
| size | 尺寸 | String | medium |
| background-color | 弹出框的背景颜色 | String | - |
| content-class | 弹出框内容的类名 | ClassName | - |
| content-style | 弹出框内容的样式 | CSSProperties | - |
| arrow-class | 弹出框箭头的类名 | ClassName | - |
| arrow-style | 弹出框箭头的样式 | CSSProperties | - |
| popup-container | 弹出框的挂载容器 | String HTMLElement null undefined | - |
Tooltip Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| popup-visible-change | 文字气泡显示状态改变时触发 | Function |
Tooltip Slots
| 参数名 | 描述 | 类型 |
|---|---|---|
| content | 内容 | - |