Skip to content

feat: Add crosshairs follow mouse feature for Tooltip #7285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yaohuitc wants to merge 2 commits into
base: v5
Choose a base branch
from
Open

feat: Add crosshairs follow mouse feature for Tooltip #7285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57e50c6
feat: crosshairs follow
yaohuitc Mar 28, 2026
6aeb7d1
feat: crosshairs follow
yaohuitc Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions site/.dumi/global.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
require('./style.css');
require('./prism-one-light.css');

// Polyfill crypto.randomUUID for non-secure contexts (e.g. HTTP on LAN IP).
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID !== 'function') {
crypto.randomUUID = () =>
'10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c: any) =>
(
+c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
).toString(16),
Comment on lines +7 to +11

@gemini-code-assist gemini-code-assist Bot Mar 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better type safety and code clarity, it's recommended to avoid using any. The parameter c in the replace callback function can be explicitly typed as string.

Suggested change
'10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c: any) =>
(
+c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
).toString(16),
'10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c: string) =>
(
+c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
).toString(16),

);
}

if (typeof window !== 'undefined' && window) {
(window as any).g2 = extendG2(require('../../src'));
(window as any).G2 = (window as any).g2;
Expand Down
22 changes: 20 additions & 2 deletions site/docs/manual/component/tooltip.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,8 +338,17 @@ When configuring `tooltip.items` for composite charts, you need to configure nod
| body | Whether to show tooltip | `boolean` | `true` | |
| bounding | Control tooltip display boundary, position will be automatically adjusted when exceeded | `{ x: number, y: number, width: number, height: number }` | Chart area size | |
| css | Set tooltip CSS styles | [css](#set-styles) | - | |
| crosshairs | Configure crosshair style | [crosshairs](#crosshairs) | See [crosshairs](#crosshairs) | |
| disableNative | Disable native pointerover and pointerout events, needs to be set to true when customizing tooltip interaction | `boolean` | `false` | |
| crosshairs | Configure crosshair style | [crosshairs](#crosshairs) | See [crosshairs](#crosshairs) | |
| crosshairsFollow | Whether crosshairs follow mouse position | `boolean` | `false` | |
| crosshairsXFollow | Whether horizontal crosshair follows mouse position | `boolean` | `false` | |
| crosshairsYFollow | Whether vertical crosshair follows mouse position | `boolean` | `false` | |
| crosshairsTag | Whether to show crosshair tags | `boolean` | `false` | |
| crosshairsXTag | Whether to show horizontal crosshair tag | `boolean` | `false` | |
| crosshairsYTag | Whether to show vertical crosshair tag | `boolean` | `false` | |
| crosshairsYTagPosition | Position of vertical crosshair tag | `'left' \| 'right'` | `'right'` | |
| crosshairsXTagFormatter | Formatter function for horizontal crosshair tag | `(value: any) => string` | - | |
| crosshairsYTagFormatter | Formatter function for vertical crosshair tag | `(value: any) => string` | - | |
| disableNative | Disable native pointerover and pointerout events, needs to be set to true when customizing tooltip interaction | `boolean` | `false` | |
| enterable | Whether tooltip allows mouse entry | `boolean` | `false` | |
| facet | Whether it's a facet chart tooltip | `boolean` | `false` | Facet composite charts |
| filter | Item filter | `(d: TooltipItemValue) => any` | - | |
Expand Down Expand Up @@ -400,6 +409,15 @@ Additionally, styles set through prefixes `crosshairsX` and `crosshairsY` have h
| crosshairsYShadowOffsetX | Vertical crosshair shadow horizontal offset | number | - | |
| crosshairsYShadowOffsetY | Vertical crosshair shadow vertical offset | number | - | |
| crosshairsYCursor | Vertical crosshair cursor style | string | `default` | |
| crosshairsFollow | Whether crosshairs follow mouse position | boolean | `false` | |
| crosshairsXFollow | Whether horizontal crosshair follows mouse position | boolean | `false` | |
| crosshairsYFollow | Whether vertical crosshair follows mouse position | boolean | `false` | |
| crosshairsTag | Whether to show crosshair tags | boolean | `false` | |
| crosshairsXTag | Whether to show horizontal crosshair tag | boolean | `false` | |
| crosshairsYTag | Whether to show vertical crosshair tag | boolean | `false` | |
| crosshairsYTagPosition | Position of vertical crosshair tag | 'left' \| 'right' | `'right'` | |
| crosshairsXTagFormatter | Formatter function for horizontal crosshair tag | (value: any) => string | - | |
| crosshairsYTagFormatter | Formatter function for vertical crosshair tag | (value: any) => string | - | |

```js
chart.options({
Expand Down
22 changes: 20 additions & 2 deletions site/docs/manual/component/tooltip.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,8 +338,17 @@ chart.options({
| body | 是否展示 tooltip | `boolean` | `true` | |
| bounding | 控制 tooltip 提示框的显示边界，超出会自动调整位置 | `{ x: number, y: number, width: number, height: number }` | 图表区域大小 | |
| css | 设置 tooltip 的 css 样式 | [css](#设置样式) | - | |
| crosshairs | 配置十字辅助线 `crosshairs` 的样式 | [crosshairs](#crosshairs) | 详见 [crosshairs](#crosshairs) | |
| disableNative | 禁用原生的 pointerover 和 pointerout 事件，需要自定义 tooltip 交互的时候需要设置为 true | `boolean` | `false` | |
| crosshairs | 配置十字辅助线 `crosshairs` 的样式 | [crosshairs](#crosshairs) | 详见 [crosshairs](#crosshairs) | |
| crosshairsFollow | 十字辅助线是否跟随鼠标位置 | `boolean` | `false` | |
| crosshairsXFollow | 水平辅助线是否跟随鼠标位置 | `boolean` | `false` | |
| crosshairsYFollow | 垂直辅助线是否跟随鼠标位置 | `boolean` | `false` | |
| crosshairsTag | 是否显示十字辅助线标签 | `boolean` | `false` | |
| crosshairsXTag | 是否显示水平辅助线标签 | `boolean` | `false` | |
| crosshairsYTag | 是否显示垂直辅助线标签 | `boolean` | `false` | |
| crosshairsYTagPosition | 垂直辅助线标签位置 | `'left' \| 'right'` | `'right'` | |
| crosshairsXTagFormatter | 水平辅助线标签格式化函数 | `(value: any) => string` | - | |
| crosshairsYTagFormatter | 垂直辅助线标签格式化函数 | `(value: any) => string` | - | |
| disableNative | 禁用原生的 pointerover 和 pointerout 事件，需要自定义 tooltip 交互的时候需要设置为 true | `boolean` | `false` | |
| enterable | tooltip 是否允许鼠标滑入 | `boolean` | `false` | |
| facet | 是否是分面图的 tooltip | `boolean` | `false` | 分面复合图表 |
| filter | item 筛选器 | `(d: TooltipItemValue) => any` | - | |
Expand Down Expand Up @@ -400,6 +409,15 @@ chart.options({
| crosshairsYShadowOffsetX | 垂直方向辅助线阴影的水平方向偏移量 | number | - | |
| crosshairsYShadowOffsetY | 垂直方向辅助线阴影的垂直方向偏移量 | number | - | |
| crosshairsYCursor | 垂直方向辅助线的鼠标样式 | string | `default` | |
| crosshairsFollow | 十字辅助线是否跟随鼠标位置 | boolean | `false` | |
| crosshairsXFollow | 水平方向辅助线是否跟随鼠标位置 | boolean | `false` | |
| crosshairsYFollow | 垂直方向辅助线是否跟随鼠标位置 | boolean | `false` | |
| crosshairsTag | 是否显示十字辅助线标签 | boolean | `false` | |
| crosshairsXTag | 是否显示水平方向辅助线标签 | boolean | `false` | |
| crosshairsYTag | 是否显示垂直方向辅助线标签 | boolean | `false` | |
| crosshairsYTagPosition | 垂直方向辅助线标签位置 | 'left' \| 'right' | `'right'` | |
| crosshairsXTagFormatter | 水平方向辅助线标签格式化函数 | (value: any) => string | - | |
| crosshairsYTagFormatter | 垂直方向辅助线标签格式化函数 | (value: any) => string | - | |

```js
chart.options({
Expand Down
Loading