1.4 KiB
| title | order |
|---|---|
| Tooltip | 0 |
Tooltip is a built-in Plugini in G6, but not reigstered by default. It needs to be imported into the code and registered with the extend method, and then you could configured it to the graph instance.
Usage
The first demo below shows the Tooltip plugin. Instantiate the Tooltip plugin and assign it to the plugins of the graph. Notice that the offsetX and offsetY can be used to adjust the offset of the tooltip to the mouse, the padding of the parent container should be counted into them, e.g. the padding of the parent container in this demo is 24px 16px, so we set the offsetX and offsetY tobe 16 + 10 and 24 + 10 respectively. The Tooltip's style can be defined by the CSS with class name g6-component-tooltip as below. For more detail, please refer to Tooltip Plugin API.
The second to the forth demo below show the Tooltip behavior. Tooltip's style can be defined by the CSS with class name g6-tooltip as below. For more detail, please refer to Tooltip Behavior.
// change the 'g6-tooltip' tobe 'g6-component-tooltip' for plugin type Tooltip
.g6-tooltip {
border: 1px solid #e2e2e2;
border-radius: 4px;
font-size: 12px;
color: #545454;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px 8px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}