spiermar
tooltip can go offscreen for rightmost and leftmost nodes
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.
Hi, I just ran into this also (via https://github.com/glowroot/glowroot/issues/457) and wanted to share my solution (not sure if it's optimal or not).
Here's my patch for d3-tip: https://github.com/trask/d3-tip/commit/66ad693feba6d6c698db1429908ccda580e4ec6b
And here's the (minor) patch for d3-flame-graph: ~~https://github.com/trask/d3-flame-graph/commit/234e52be6e13f0d5c4ee093b14e66b2cd64e46e4~~ https://github.com/trask/d3-flame-graph/commit/e4b6ee95aaabd772a00ba06a2eaec873ac02a536
I started out with another option for keeping tooltips on screen (based on https://github.com/Caged/d3-tip/pull/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.
@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.
@spiermar Thanks, I've submitted the PR to d3-tip https://github.com/Caged/d3-tip/pull/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.