tooltip can go offscreen for rightmost and leftmost nodes

[wonder-mice]

In certain cases part of tooltip will be obscured by browser window.

[wonder-mice]

Just want to add, that this one is almost a blocker for me. I have large data sets with long names and tooltips always go over left edge or under the bottom edge.

[trask]

Hi, I just ran into this also (via glowroot/glowroot#457) and wanted to share my solution (not sure if it's optimal or not).

Here's my patch for d3-tip: trask/d3-tip@66ad693

And here's the (minor) patch for d3-flame-graph: trask@234e52b trask@e4b6ee9

I started out with another option for keeping tooltips on screen (based on caged/d3-tip#198), but I thought that keeping the tooltips always south of the frame (instead of jumping to the east or west of the frame) was nicer for flame graphs.

It could probably be nicer still if the "caret" were a dom element instead of using css :after, because then the caret's horizontal position could be dynamic relative to the tooltip itself, which would allow the tooltip itself to extend further right/left as needed/available, while the caret could still point at the correct frame.

You can see the patched version in action at https://demo.glowroot.org/transaction/thread-flame-graph?transaction-type=Web

@spiermar I'd like your thoughts before opening a PR to d3-tip in case you have other ideas/plans. Thanks.

[spiermar]

@trask I like the solution. Changing the direction when close to the border. Having said that, the only d3-flame-graph changes are in the CSS. All the JavaScript changes are in the d3-color and d3-tip dependencies apparently, so it would be a matter of having the changes accepted there. I would open a PR to d3-tip anyway, because it's a common issue and the maintainers probably had to deal with it before and might have a better input that I do. I also have to check the change a bit more carefully, but it might be possible to just override the functions in the d3-tip and avoid the d3-color (and possible other dependency) changes.

[trask]

@spiermar Thanks, I've submitted the PR to d3-tip caged/d3-tip#238. Let's see how that goes. The d3-color related changes were unintentional, I was building with old npm version so it didn't use the package-lock.json. I've fixed my local build and updated the d3-flame-graph patch link above.