mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
26 lines
1.3 KiB
Markdown
26 lines
1.3 KiB
Markdown
---
|
||
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](/zh/docs/api/Plugins#tooltip)。
|
||
|
||
下面第二～第四个示例展示了 tooltip behavior。若需要定义 tooltip 的样式，需要定义类名为 `g6-tooltip` 的标签的 CSS 样式，见下方。使用方法详见 [Tooltip Behavior](/zh/docs/manual/middle/states/defaultBehavior#tooltip)。
|
||
|
||
```css
|
||
// 使用 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;
|
||
}
|
||
```
|