How do I add a close X icon in kendo-chart-series-item-tooltip

[Maitri]

I have a bar chart in which I am showing tooltip when user hovers on series(bars). Now I want to show an icon (X) to let user close the tooltip instead of auto close. I tried closable="true" but it is not working on kendo-chart-series-item-tooltip. (The popup which gets opened on series hover has customized logic inside which shows 3-4 lines inside a div )

So I want an icon inside the tooltip so that when user clicks on that X icon then only the tooltip should close. 

Please refer the attached image for better understanding of my requirement.

 

 

[Martin Bechev]

Hi Maitri,

Thank you for the provided screenshot.

Currently, the Chart's tooltip does not provide a built-in option to close it manually. What can be done instead is to utilize our standalone Kendo Angular Tooltip component and use its built-in closable option.

The developer can handle the seriesHover event of the Chart and toggle the visibility of the Tooltip with show method. The following example demonstrates the suggested approach in action:

https://stackblitz.com/edit/angular-qpwo13

Another way to achieve this requirement is to use Kendo Angular Popup component. But then the callout (small arrow) of the Tooltip will be missing, as by design the Popup doesn't have such.

Here is an example of how the Chart can show a custom Popup on series hover:

https://stackblitz.com/edit/angular-a7tczw-dc6qmq

I hope this helps. 

Regards,
Martin
Progress Telerik