Fix tooltip not closing #34001
Fix tooltip not closing #34001
Conversation
oscarkilhed
requested review from
dprokop and
a team
and removed request for
a team
| @@ -49,6 +49,11 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ | |||
|
|
|||
| // Add uPlot hooks to the config, or re-add when the config changed | |||
| useLayoutEffect(() => { | |||
| if (plotCtx && plotCtx.plot) { | |||
| plotCtx.plot.root.onmouseleave = (event) => { | |||
There was a problem hiding this comment.
you may instead consider binding to .u-over, so it disappears when leaving the grid area instead of the entire chart.
There was a problem hiding this comment.
Hmm, where can I find .u-over? I'm a bit lost here and this solution was quite hacky, any guidance appreciated.
There was a problem hiding this comment.
e.g.
grafana/public/app/plugins/panel/barchart/bars.ts
Lines 177 to 181 in cf39d5b
(just make sure the querySelector only runs during init and not on every redraw)
There was a problem hiding this comment.
i really should just expose this as u.over in future uPlot versions, even in my own demos i have to do this querySelector dance pretty often.
There was a problem hiding this comment.
Alright, I think I've cleaned this up a bit. Thanks for the help.
| if (plotCtx && plotCtx.plot) { | ||
| plotCtx.plot.root.querySelector('.u-over')!.addEventListener('mouseleave', plotMouseLeave); | ||
| } | ||
|
|
||
| return () => { | ||
| if (plotCtx && plotCtx.plot) { | ||
| plotCtx.plot.root.querySelector('.u-over')!.removeEventListener('mouseleave', plotMouseLeave); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Feel more comfortable now with the event listeners than with onmouseleave, good stuff!
|
Ah, and it works as expected! |
* Fix tooltip not closing * make this a bit less hacky * use a more specific element for the mouseleave event * Make sure we limit running of effect * Remove console log * Probably don't need useCallback
* Fix tooltip not closing * make this a bit less hacky * use a more specific element for the mouseleave event * Make sure we limit running of effect * Remove console log * Probably don't need useCallback
What this PR does / why we need it:
Fixes a bug where the tooltip on the bar graph stays open when the mouse leaves the plot.