Update CustomContentOfTooltip example so that the tooltip does not jump around #328
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…mp around Workaround for recharts/recharts#5986
There was a problem hiding this comment.
Pull Request Overview
This PR updates the custom tooltip example to prevent the tooltip container from jumping by always rendering the wrapper and toggling visibility via CSS, and adjusts how the tooltip component is passed to <Tooltip>.
- Always render
<div className="custom-tooltip">and switch its visibility instead of conditionally returningnull - Change
<Tooltip content={<CustomTooltip />} />to<Tooltip content={CustomTooltip} />to pass the component directly
Comments suppressed due to low confidence (1)
src/docs/exampleComponents/Tooltip/CustomContentOfTooltip.js:75
- [nitpick] The indentation around this conditional fragment is misaligned; matching its indentation level with the
<div>opening tag will improve readability.
{isVisible && (
| return null; | ||
| const isVisible = active && payload && payload.length; | ||
| return ( | ||
| <div className="custom-tooltip" style={{ visibility: isVisible ? 'visible' : 'hidden' }}> |
There was a problem hiding this comment.
[nitpick] Consider adding pointerEvents: isVisible ? 'auto' : 'none' to this style so the hidden tooltip container doesn't intercept mouse events and block interactions with underlying elements.
Suggested change
| <div className="custom-tooltip" style={{ visibility: isVisible ? 'visible' : 'hidden' }}> | |
| <div className="custom-tooltip" style={{ visibility: isVisible ? 'visible' : 'hidden', pointerEvents: isVisible ? 'auto' : 'none' }}> |
Copilot uses AI. Check for mistakes.
ckifer
approved these changes
Jun 23, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Workaround for recharts/recharts#5986