Tooltip with clickable button freezing in the UI when clicking the tooptip but not the button

[ow2code]

Im using useHtml loading custom buttons, I have allowableAttraibutes and AllowableTags, pointerEvents: auto. However when I click anthing except the button in the tooltip it freezes and takes a while to disappear and the app is not useable until the tooltip disappears.

I've tried tooltip.destroy(), setting pointer-events directly on the button and pointerEvents: none in the parent div. Document remove child and nothing works.

When I click the button it seems to work better but if i click the tooltip itself it breaks.

Thank you

[jakub.s]

Hi,

Thanks for the question!

Could you please try to reproduce this issue in an online code editor like JSFiddle? You could start working from there: https://jsfiddle.net/BlackLabel/u3yzpvdn/2/

I'm afraid that only then will I be able to help you resolve this problem.

Best regards!

[ow2code]

Hi it would be very difficult to recreate in jsfiddle because how we are applying the data to the tool tip. Using reduce() im not sure if that has something to do with it. But I also noticed that destroyWhenHiding() does not seem to be working when I call it from a document listener event (click) or hostlistener(angular for click) or when i add it to plotoptions.series.events.mouseout. My suspicion is that using reduce and conditional logic is slowing down the tooltip instead of formatting the data and applying it directly on hover.

Thank you

[ow2code]

It looks like the issue is with the tooltip outside prop being set to true in our set up. When the tooltip is bound to the chart it looks like its working fine. I dont know if this helps you conceive of a possible change, I imagine the browser is lagging trying to find the tooltip because its in an overlay outside of the component that the click event is coming from.

Thank you

[ow2code]

I made a lot of progress, so it looks like if the tooltip contains an element that is clickable that does nothing like a div then there is potential lagging on the element. I changed all the divs to spans and its working much better and my buttons are clickable (within the tooltip). Maybe it will be helpful for users to know if they intend to click on tooltips be careful what type of elements are used. If you use pointer-events in the tooltip.style it will apply to the div and other unintended elements.

One thing I noticed which is not major, it looks like there is some slowness redrawing the tooltip that just disappeared. When you hover over the point if you take your mouse off the point a little bit and bring it right back to the same point there is lag sometimes. This might be out of highcharts control, or maybe my hidedelay time is still running I can check out this.

I tried to recreate most of my needs in a jsfiddle to figure out these things.

https://jsfiddle.net/9hrefct4/83/

[ow2code]

So for our requirements we have some information in the tooltip that has buttons and some data. We need the tooltip to stay open for a certain amount of time to let users look at the info but when they mouseout a certain distance we need to change the hide delay time. I dont know if this is something you have encountered but Ive been playing around with some event listeners to hold the tooltip open but I wanted to see if there is a better way to achieve keeping the tooltip open for x amount of time but closing it immediately when the mouse gets a certain distance from the plot point. Maybe there is a radius to the point that gets registered or something like that. Thank you,.

[jakub.s]

Thanks for the question!

You're right, not everything may work perfectly as the tooltip was created to add a small piece of additional information about the point/series and not a lot of data with buttons and custom functionality.

---
1. I'm not sure if you're aware of it, but your tooltip was not rendered as HTML, but as SVG. The name of the property is useHTML, not useHtml (https://api.highcharts.com/highcharts/tooltip.useHTML).

Here's an updated demo where you can see how the tooltip looks like when it's rendered as HTML: https://jsfiddle.net/BlackLabel/gxuv8ab3/

I did not encounter any performance issues here.

---
2. If you need the tooltip to stay open for only a certain period of time you can tap into the tooltip.refresh event with Highcharts events.

When the tooltip shows, you'll hide it with a certain delay through this method: tooltip.hide(delay) (https://api.highcharts.com/class-refere ... oltip#hide)

Here's a demo: https://jsfiddle.net/BlackLabel/56pk03wu/

---
3. I'm not aware of any properties you could add to the config that would allow you to close the tooltip immediately after reaching a certain distance.

You could try using the mousemove event to track where the mouse is and do hide the tooltip with no delay when a certain distance is reached.

---
Let me know if that helps.

Kind regards!

[ow2code]

Hey Jakub I have been trying to implement the refresh option but no luck.

Generally Im using the tooltip to hold buttons that are clickable and send the data down to the angular class. I have that working.

After the click I want to disable the button because its doing a call.

So im receiving the value from the clicked button into the angular class but I dont know how to access tooltip refresh from that point. The error message is that the refresh function expects 1-2 arguments but I have tried to access the array of points from the graph ad pass it to the function as an argument. But no luck there.


I have 7 series that are shared I just need to refresh the tooltip that is displayed. It looks like refresh() takes a point or points[], I gave refresh and argument of an array of all the values in each series.points array. I get an error that the formatter is undefined.
it looks like in some compressed code there is a refresh object being made but it does not have access to the formatter function. I Suppose thats the formatter function from the tooltip formatter?

I saw an implementation that someone from highcharts gave that gets to the core of tooltip.prototype.refresh() to add the formatter but im not sure why it would be this difficult.

My tooltip formatter is returning some html with buttons so maybe that is not compatiable with the refresh option.

Ive see places that talk about a series.getPoint function im not sure what the argument is for that but in my highcharts version (10.1.0) and highcharts-angular (3.0.0) that is not available.

Let me know if you have any thoughts on this. I def think it would be useful to have an easier way to get the focused point without using document or jquery.

[jakub.s]

Hi,

1. I'm sorry but I'm not sure what is the problem that we're trying to solve now. Why do you need to create a custom tooltip.refresh method? Where and why do you need to call it manually? I'm not sure if you've mentioned it before, but nothing like that was included in the demos we've been exchanging.

2. I think it might be worth trying to create a custom component with buttons and your custom logic and using it as a tooltip through portal.

Please take a look at this example which shows how to use a tooltip portal with custom method affecting the chart: https://stackblitz.com/edit/highcharts- ... mponent.ts

I'll be waiting for your response.

Best regards!

[ow2code]

Apologies for the confusion. I saw in another Highcharts forum a developer suggested getting into the core of tooltip.prototype.refresh. I dont want custom refresh features I just want to manually refresh the tooltip after the button is clicked.
The tooltip remains open when the button is clicked which is what we want however the button that was clicked needs to become disabled after clicking it which requires the tooltip to be refreshed. Tooltip outside is set to true.

[jakub.s]

Sure, no problem!

I also don't think you need a custom refresh function.

"I just want to manually refresh the tooltip after the button is clicked" - if that's the case, you can do it like in this demo that I've prepared: https://jsfiddle.net/BlackLabel/ztg3mfuc/

API: https://api.highcharts.com/class-refere ... ip#refresh

You can call the refresh function on the chart.tooltip with a Highcharts.Point passed as an argument.

Is that helpful?