Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Custom tooltip on click instead of mouseover

How can I make both custom tooltip(plotlines) and default tooltip(points) to appear only when clicked on it .
Fiddle: https://jsfiddle.net/z30rtu74/70/

Is it possible to keep it open until we click on it again. Or in other words, can we make it disappear only while clicking on same tooltip again. Thank you.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Custom tooltip on click instead of mouseover

Hi Sr270!
We appreciate you reaching out to us!

Not long ago, there was a similar topic to yours: viewtopic.php?f=9&t=49448

To make it work with your custom plotlines all you have to do is add more custom JS logic. Also, I have added the possibility to hide the tooltip by clicking on the same point with opened tooltip.

Demo: https://jsfiddle.net/BlackLabel/6y3crL8n/

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip on click instead of mouseover

Thanks a lot. That works great.

I have an additional question relating to tool tip. How can I have a fixed height for tooltip and accommodate all data inside (if there are assume 10 rows and should be accommodated within certain height - assume 200px).

Fiddle: https://jsfiddle.net/o5bkcu0g/56/

Example: On click of first tooltip on the fiddle provided, only until 'item34' is shown, I want all 50 items to be accommodated inside set height(768px) and be visible on click of tooltip. Thank you in advance.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Custom tooltip on click instead of mouseover

Sr270,
You can use the tooltip.outside property and the tooltip will be rendered outside the chart container. An additional click event on the tooltip can cause some problems with showing/hiding the tooltips.

Demo: https://jsfiddle.net/BlackLabel/hmk9t7s5/
API Reference: https://api.highcharts.com/highcharts/tooltip.outside

Regards!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip on click instead of mouseover

Hi,

Is it possible to hide tooltip only on click (on the tooltip)?
I do not want it to close when the cursor is moved. Tooltip should stay open until I click on it again. Thank you.

https://jsfiddle.net/BlackLabel/6y3crL8n/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Custom tooltip on click instead of mouseover

Sr270,

you can change one Core function to achieve that:

Code: Select all

Highcharts.Pointer.prototype.reset = function () {
    return undefined;
};
You can check it also in the demo below.

Demo: https://jsfiddle.net/BlackLabel/3pe5jrdq/

Regards!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip on click instead of mouseover

Thanks a lot. That's perfect.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Custom tooltip on click instead of mouseover

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip on click instead of mouseover

Hi,

I have two questions:

1) If we forget to close the tooltip on clicking on it again, it stays open even when I switched page. Assume app has two page, chart page and details page. It still shows in other page (when I switch to details page without closing tooltip). How do I handle this?

2) Is there a possibility to hide tooltip on clicking on the area of tooltip instead of the axis line?

https://jsfiddle.net/BlackLabel/3pe5jrdq/


Thanks again.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Custom tooltip on click instead of mouseover

Hi again Sara!
Answering your questions:

1) To simulate this App Page moving I have created an external button. If you open the tooltip and click that button to "move to another page" it will close the tooltip (use tooltip.destroy() method). You should implement similar logic after changing the App Page in your project.

2) Yes, this is possible, but also with other tricks. First, you need to include in the tooltip configuration this: tooltip.style.pointerEvents: 'auto'. Then, in your custom logic of showing/hiding tooltips add a conditional event to destroy tooltip on click. I did it with Highcharts.addEvent method.

You can check everything in the demo below.

Demo: https://jsfiddle.net/BlackLabel/yfq274sg/
API Reference: https://api.highcharts.com/class-refere ... ent%3CT%3E

Feel free to ask any further questions.
Regards!
Hubert Kozik
Highcharts Developer
Sr270
Posts: 83
Joined: Tue Aug 23, 2022 12:15 pm

Re: Custom tooltip on click instead of mouseover

That was perfect! thank you.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Custom tooltip on click instead of mouseover

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”