Tooltip 文字提示

#

代码示例

#

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

#

基础用法

#

在这里我们提供 12 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

上左 上边 上右

左上 左边 左下

右上 右边 右下

下左 下边 下右

▼显示代码

#

主题

#

Tooltip 组件提供了两个不同的主题：dark和light。

深色主题 浅色主题

▼显示代码

#

更多内容

#

展示多行文本或者是设置文本内容的格式

多行内容

▼显示代码

渲染方式

1、通过comp方式渲染

▼显示代码

2、通过对象渲染

▼显示代码

参数列表

参数	说明	类型	可选值	默认值
effect	默认提供的主题	string	dark/light	dark
content	显示的内容，过滤所有的html标签(isMultipleRows为true的时候仅保留<br>)	string	—	—
placement	Tooltip 的出现位置	string	topCenter/topStart/topEnd bottomCenter/bottomStart/bottomEnd leftCenter/leftStart/leftEnd rightCenter/rightStart/rightEnd	topCenter
isMultipleRows	是否多行（ 多行需自行传入<br>实现换行）	Boolean	—	false
width	最大宽度，超过自动换行，否则到达窗口边缘再换行	number	-	'auto'