如何使用气泡提示完整内容
1. 场景
在自定义页面循环展示数据时,当数据内容过长时,就会发生显示不完整的情况,这时我们可以使用气泡提示,当鼠标划过时可自动展示完整内容。
2. 视频展示
更新中,敬请期待~
3. 实现步骤
3.1 配置气泡提示组件
3.1.1 添加容器,放入并配置气泡提示组件
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634787505899-bd3ba8ae-6965-4767-a1f1-cdf4fa811895.png)
图3.1.1-1 拖入气泡组件
这时打开大纲树,可以看到在气泡提示下有触发元素层以及弹层,触发元素层用于放置显示在页面中的触发内容,弹层则是用于显示弹出框内容。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634787615066-68ed9093-2c7f-46e4-8b25-4a6f6e142baa.png)
图3.1.1-2 查看大纲树中的气泡提示组件
3.1.2 配置气泡提示组件
需将触发行为修改为 「Hover」,在鼠标划过时即可弹出气泡。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642037626873-3435b91c-bcb3-4f4c-93e4-a029e40ee925.png)
图3.1.2-1 配置气泡提示属性
3.2 配置在触发元素层循环展示数据
3.2.1 拖入文本组件并放置于触发元素中
拖动文本组件到页面中,需在大纲树中找到文本组件,并在大纲树中将文本组件拖动到触发元素下。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634787755442-68cfb1fe-90b7-48d4-9df0-65acd9b3c4f1.png)
图3.2.1-1 调整文本组件的位置
调整文本组件的样式,样式可自由调整。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634788261640-604420d1-bc8a-4f6b-a818-674d4fb8027d.png)
图3.2.1-2 调整文本组件的样式
3.2.2 创建变量数据源,添加测试数据
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634784982854-16c804cf-8567-4766-a32c-544fe3dbc4ef.png)
图3.2.2-1 添加变量数据源
测试数据可参考如下:
[
{
"name":"测试AAAAAAAAAAAA"
},
{
"name":"测试BBBBBBBBBBBB"
},
{
"name":"测试CCCCCCCCCCCC"
},
{
"name":"测试DDDDDDDDDDDDD"
},
{
"name":"测试EEEEEEEEEEEEE"
},
{
"name":"测试FFFFFFFFFFFFF"
},
]
3.2.3 将容器绑定变量数据源
将创建好的变量数据源绑定在最外侧容器中,变量数据源中的数据会在容器中的组件循环展示。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634785397471-179824fb-ea84-4a61-9c98-e6d649160b4c.png)
图3.2.3-1 绑定变量数据源
3.2.4 将触发元素中的文字组件绑定循环数据内容
容器绑定变量数据源data后,迭代变量名为item,文本需要绑定变量数据源中的name值,因此将文本绑定 item.name 。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634785650275-b6fc0976-af7d-4d76-b5bd-29a231709971.png)
图3.2.4-1 文字绑定变量数据源中的内容
3.2.5 循环数据展示效果如下
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634787941899-29cc4784-db87-4680-8433-bec3b91811c6.png)
图3.2.5-1 循环数据展示效果
3.3 配置气泡弹出层内容
3.3.1 拖入文本组件并放置于触发元素中
拖动文本组件到页面中,需在大纲树中找到文本组件,并在大纲树中将文本组件拖动到弹层下。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634788390416-1875ec98-7a89-4cba-8dea-13a0a7e73435.png)
图3.3.1-1 调整文本组件的位置
调整文本组件的样式,样式可自由调整。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634788442329-db5b4ab4-fd6d-48d2-914a-33441f76e1ec.png)
图3.3.1-2 调整文本组件的样式
3.3.2 将弹层中的文字组件绑定循环数据内容
容器绑定变量数据源data后,迭代变量名为item,文本需要绑定变量数据源中的name值,因此将文本绑定 item.name 。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634789010783-03152ca0-7da5-47b9-bd21-01a2b86c2f23.png)
图3.3.2-1 文字绑定变量数据源中的内容
4. 效果展示
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1634789461188-747acde6-8be5-466d-a647-de30df0b911b.png)
图4-1 展示效果
5. 在线试玩
在线体验请移步开发者中心 👉 如何使用气泡提示完整内容
https://www.aliwork.com/bench/coe?tplUuid=TPL_T5X4BNF7CDGI7BOAQG8C
--------------------获取宜搭最新信息,欢迎关注我们--------------------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1632807780139-91cbcd43-8c42-44f3-9b2d-0d8b799ab7ea.jpeg)