Example CustomizedCursor Component for Tooltip

See original GitHub issue

The API documentation for Tooltip states that you can also pass a custom Component as the cursor prop. (http://recharts.org/en-US/api/Tooltip#cursor). Would you be able to provide an example of a cursor component that would work for this purpose?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:16
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
ckifercommented, Aug 11, 2020

doing something like this works but throws an error about brushBottom cursor={<rect fill="red" stroke="red" />}

this works. customize anything from there with the props given. Props are: bottom, brushBottom, className: "recharts-tooltip-cursor", fill, height, left, payload, pointerEvents, right, stroke, top, width, x, y

const CustomCursor = props => {
    const { x, y, width, height, stroke } = props;
    return <Rectangle fill="red" stroke="red" x={x} y={y} width={width} height={height} />;
};
<Tooltip
   cursor={<CustomCursor />}
/>
1reaction
ckifercommented, Nov 8, 2021

Hey @acomito, I haven’t been very active in recharts but from what I can tell the props have changed just a bit. There should be a points prop that has two sets of x and y values. From playing around I can’t quite get them to work as they used to but feel free to post back here if you find a solution. Not quite working example

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cursor-follow React Tooltip Component
Cursor -follow React Tooltip Component. A highly customizable React tooltip component that will always follow your cursor when mouse hovers and moves.
Read more >
React tooltip component that follow mouse cursor
react-sticky-mouse-tooltip​​ React tooltip component that follow mouse cursor. You can pass as children any HTML element or other React component.
Read more >
Tooltip CSS cursor - User Experience Stack Exchange
So the cursor tells the user how can (or can't) he utilize the element (click to perform some action, click drag to move...
Read more >
Make CSS tooltip follow cursor - Stack Overflow
Something like this var tooltip = document.querySelectorAll('.coupontooltip'); document.addEventListener('mousemove', fn, false); function ...
Read more >
Tooltip - Examples - Components - Atlassian Design System
If set to mouse , the tooltip will display next to the mouse pointer. Use mousePosition if you want to customize where the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found