mirror of
https://gitee.com/antv/g6.git
synced 2024-12-16 02:21:25 +08:00
1.3 KiB
1.3 KiB
| title | order |
|---|---|
| 提示框 | 0 |
G6 提供了两种 Tooltip，分别插件和 behavior。Tooltip behavior 即将在 v4.0 中废除，推荐使用插件 Tooltip。
使用指南
下面的第一个示例是插件 Tooltip。将实例化的 Tooltip 配置到图的 plugins 中即可。需要注意的是 offsetX 与 offsetY 用于调整 tooltip 的偏移，需要考虑父容器的 padding 值。如在本例中，画布上层容器有 24px 16px 的 padding，则设置 tooltip 的 offsetX 与 offsetY 分别为 16 + 10 与 24 + 10。若需要定义 tooltip 的样式，需要定义类名为 g6-component-tooltip 的标签的 CSS 样式，见下方。使用方法详见 Tooltip 插件 API。
下面第二～第四个示例展示了 tooltip behavior。若需要定义 tooltip 的样式，需要定义类名为 g6-tooltip 的标签的 CSS 样式，见下方。使用方法详见 Tooltip Behavior。
// 使用 Tooltip 插件，请将 'g6-tooltip' 替换为 'g6-component-tooltip'
.g6-tooltip {
border: 1px solid #e2e2e2;
border-radius: 4px;
font-size: 12px;
color: #545454;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px 8px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}