Flip tooltip position when its rendered beyond screen plot #15
Conversation
sergeylukin
force-pushed
the
flip-on-screen-overflow
branch
from
48ce3af to
2ab16cd
Compare
sergeylukin
force-pushed
the
flip-on-screen-overflow
branch
from
2ab16cd to
7c4c149
Compare
There was a problem hiding this comment.
Thank you for the PR! 🎉 It looks (and works) awesome! I've added some code-style comments, could you take care of that? 🙏 😉
Before merge, I'd like to add tests (I'm currently working on it) to be sure that everything works fine. The package is used in many projects and we must be sure that nothing will break. 😉
| constructor(props) { | ||
| super(props); | ||
| this.containerRef = React.createRef(); | ||
| } |
There was a problem hiding this comment.
We can avoid declaring a constructor by assigning containerRef as a class property (see the state property). 😉 This approach is consistent with the current code style (IMO it's clearer and more convinient). Can you change it? 😄
| const screenWidth = window.innerWidth; | ||
| const screenHeight = window.innerHeight; |
There was a problem hiding this comment.
Can you destructure these properties?
| const screenWidth = window.innerWidth; | |
| const screenHeight = window.innerHeight; | |
| const { innerWidth: screenWidth, innerHeight: screenHeight } = window; |
| const containerWidth = this.containerRef.current.clientWidth; | ||
| const containerHeight = this.containerRef.current.clientHeight; |
There was a problem hiding this comment.
These too, please? 😉
| const containerWidth = this.containerRef.current.clientWidth; | |
| const containerHeight = this.containerRef.current.clientHeight; | |
| const { clientWidth: containerWidth, clientHeight: containerHeight } = this.containerRef.current; |
Description
Render tooltip from the opposite side of mouse (using same offset but in opposite direction) when mouse is positioned so close to screen edge that tooltip is rendered beyond the plot hiding it's content.
Before (mouse cursor does not appear on screenshot):
After: