Fixes issue #8 Move tooltip with mouse pointer #157
Conversation
There was a problem hiding this comment.
Worried about the overhead of using mousemove. It's called very frequently. Not sure if a debounce would even help.
The issue was also created when d3-tip was the default library. Don't think this would help with d3-tip and not as big of an issue now with the new tooltip.
Now, the tooltip overflowing to outside the screen is a bigger issue.
src/flamegraph.js
Outdated
| if (tooltip) tooltip.hide() | ||
| detailsHandler(null) | ||
| }).on('mousemove', function (d) { | ||
| const chartBoundingClientRect = svg._groups[0][0].parentNode.getBoundingClientRect() | ||
| const chartRightBoundary = chartBoundingClientRect.x + chartBoundingClientRect.width |
There was a problem hiding this comment.
This might be moved up as a separate function to fetch chart boundary
|
@spiermar |
|
|
|
Need to move |
src/flamegraph.js
Outdated
| if (tooltip) tooltip.hide() | ||
| detailsHandler(null) | ||
| }).on('mousemove', function (d) { | ||
| const chartBoundingClientRect = svg._groups[0][0].parentNode.getBoundingClientRect() |
There was a problem hiding this comment.
Using the DOM API getBoundingClientRect() to get the size and position of the chart area rendered in the web page.
src/flamegraph.js
Outdated
| if (tooltip) tooltip.hide() | ||
| detailsHandler(null) | ||
| }).on('mousemove', function (d) { | ||
| const chartBoundingClientRect = svg._groups[0][0].parentNode.getBoundingClientRect() | ||
| const chartRightBoundary = chartBoundingClientRect.x + chartBoundingClientRect.width |
|
|
||
| let tooltipLeft = event.pageX + 10 | ||
|
|
||
| if (tooltipRightBoundary > chartRightBoundary) { |
There was a problem hiding this comment.
Could we completely flip the tooltip to the right if boundary is exceeded? Not just shift so it fits?
There was a problem hiding this comment.
This is a good idea. Let me try...
|
Working to make it compatible with d3-tip as per https://github.com/caged/d3-tip/blob/master/docs/showing-and-hiding-tooltips.md#tipshow so that the function is called like tip.show(d, this) like before. |
|
@spiermar I was wondering about the reason why we want our Is there any other reason? |
Calculating chart boundary inside tooltip.js and keeping the method .show compatible with d3-tip
This is done. |
The change that dropped d3-tip from the dependencies in favor of the simple tooltip script happened recently and most users still use de-tip and will likely continue for a while, even if it was abandoned. Looking to not introduce breaking changes. |
| var tooltip = null | ||
| var html = defaultLabel | ||
| const rootElement = select('body') | ||
| const chartElement = select('#chart') |
There was a problem hiding this comment.
This should be passed to the tooltip init, since it can be something else.
Added event mousemove to call the function tooltip.show(). Now within the frame, the tooltip will follow the mouse pointer.