#7071 enhance edge detection for tooltips #7072
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 2 Skipped Deployments
|
| if (hostOffset.left + tooltipWidth > viewportWidth) { | ||
| // accounting for a scrollbar being present, getViewport() width includes scrollbars | ||
| left = Math.floor(hostOffset.left + elementWidth - tooltipWidth); | ||
| } |
There was a problem hiding this comment.
This could be simplified to viewport width - tooltip width, but the current viewport helper returns the viewport width including the scrollbar.
This works well enough though as a workaround.
Using floor as offset values are floating points which causes off by 1px havoc, floor here as we are calculating a left offset, to be on screen a smaller number is needed.
window (1400px)
left (1400.359275px) -- up to the browser vendor whether to round up or down to the nearest pixel
| let elementRelativeCenter = Math.abs(this.getHostOffset(tooltipElement).left - hostOffset.left) + elementWidth / 2; | ||
|
|
||
| arrowElement.style.top = null; | ||
| arrowElement.style.right = null; | ||
| arrowElement.style.bottom = '0'; | ||
| arrowElement.style.left = elementRelativeCenter + 'px'; |
There was a problem hiding this comment.
I had to move the arrow positioning out of preAlign as we need to access the final position of the tooltip in order to position the arrow properly.
As a bonus this removes the somewhat hard to grok ternary that was setting this before.
There are calculation problems on top and bottom. |
|
Will have a poke at them, thanks for testing. |
|
Apparently my math is terrible, had things backwards. I believe it should be right now, also made the tooltip only check half the width to see if it has enough space to fit on the left side of the screen, this was left aligning the tooltip before it needed to. There is a 1px error going on with the arrow at some sizes/positions, however I'm fairly sure that was pre existing, I see it on the current official docs as well, it can be seen in the first two screenshots here. |
|
Thank you so much for your contributions. |
###Defect Fixes
#7071
Adding some edge detection when position is
toporbottomand the tooltip is close to the left/right edge of the screen.As a consequence of this when the tooltip is adjusted to fit inside the screen the tooltip arrow ends up being in the wrong position, fixed that as well.