JointJS创建多个节点时增加Tooltip
时间: 2023-10-31 16:04:12 浏览: 47
要为 JointJS 创建的多个节点增加 Tooltip,可以使用 JointJS 的 `tooltips` 选项。该选项可以在节点定义对象中设置,如下所示:
```
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'My Rect', fill: 'white' } },
tooltips: { title: 'My Rect Tooltip', content: 'This is a tooltip for My Rect' }
});
```
在上面的例子中,我们定义了一个基本的矩形节点,并通过 `tooltips` 选项设置了节点的标题和内容。当用户鼠标悬停在节点上时,将会显示这个 Tooltip。
如果你需要为多个节点设置 Tooltip,可以使用循环来创建节点并设置 `tooltips` 选项。例如:
```
for (var i = 0; i < 10; i++) {
var rect = new joint.shapes.basic.Rect({
position: { x: i * 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'My Rect ' + i, fill: 'white' } },
tooltips: { title: 'My Rect ' + i + ' Tooltip', content: 'This is a tooltip for My Rect ' + i }
});
graph.addCell(rect);
}
```
在上面的例子中,我们使用循环创建了 10 个矩形节点,并为每个节点设置了不同的标题和内容。然后将这些节点添加到画布中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)