文字气泡 Tooltip

基本用法

鼠标移入，气泡出现，鼠标移出，气泡消失。

气泡会自动避让可视窗口边界。内容过长时，内部使用 Scrollbar 滚动，鼠标可移入气泡查看完整内容；短提示默认保持鼠标穿透。

鼠标穿透

文字气泡默认允许鼠标穿透，离开触发元素后会自动隐藏。设置 mouse-through="false" 后，鼠标可以移入气泡并保持显示。

超长内容

内容超出可用空间时自动显示滚动条，移入气泡即可滚动查看。

自定义背景颜色

通过 background-color 属性自定义背景颜色。

迷你尺寸

适用于小场景或数字气泡样式。

位置

文字气泡支持 12 个不同的方位。分别为：上左、上、上右、下左、下、下右、左上、左、左下、右上、右、右下。

<tooltip> 组件继承 <trigger> 组件的全部属性

API

<tooltip> 属性

参数名	描述	类型	默认值
popup-visible (v-model)	文字气泡是否可见	boolean	-
default-popup-visible	文字气泡默认是否可见（非受控模式）	boolean	false
disabled	文字气泡是否禁用	boolean	false
mouse-through	鼠标是否穿透文字气泡；内容溢出需滚动时自动允许交互	boolean	true
content	文字气泡内容	string	-
position	弹出位置	'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'	'top'
mini	是否展示为迷你尺寸	boolean	false
background-color	弹出框的背景颜色	string	-
content-class	弹出框内容的类名	ClassName	-
content-style	弹出框内容的样式	CSSProperties	-
arrow-class	弹出框箭头的类名	ClassName	-
arrow-style	弹出框箭头的样式	CSSProperties	-
popup-container	弹出框的挂载容器	string | HTMLElement	-

<tooltip> 事件

事件名	描述	参数
popup-visible-change	文字气泡显示状态改变时触发	visible: boolean

<tooltip> 插槽

插槽名	描述	参数
content	内容	-