I am upgrade and existing Kendo UI for jQuery based app to use KendoReact and I am having problems getting tooltips to displayed on the BarChart Category label.
In my Kendo UI for Query app, I have implemented the code enable the tooltips as described in the following Article (https://docs.telerik.com/kendo-ui/controls/charts/how-to/integration/tooltip-for-category-axis-labels?_ga=2.75079313.2031723793.1571781435-2043405146.1571781435), and it works as expected.
In KendoReact, setting the 'labelVisual.options.tooltip' property is not displaying tooltips.
I have tried to write custom code to work around this limitation, looking for a trigger to render a css hover driven tooltip or to active an instance of KendoReact Tooltip component. I have tried making the Category label a shape and using a popup window for the tooltip as described in the React kendo Docs(https://www.telerik.com/kendo-react-ui/components/drawing/tooltip/), with no success.
Has anyone implement such code or have any recommendation on how to implement this?
I have tried to solve this problem using an SVG based solution as described in the following
article (http://www.petercollingridge.co.uk/tutorials/svg/interactive/tooltip/), however I have not found a way to assign a class to the BarChart label svg element and furthermore cannot use this solution.
If you reference to the Kendo Documentation (https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/tooltips/) for the BarChart, it doesn't say it has support for Category label tooltip as in the Kendo UI for jQuery.
3 Answers, 1 is accepted
Hello, Bob,
Thank you for the information.
Indeed, I try the same approach and it was not working on my end as well.
Still, I noticed that the function was called way more times than it is needed, and I can assume that this is caused by an issue which we are working on.
I assume that after this issue is fixed, the Tooltip will be shown as expected.
I will leave this ticket opened, and keep you updated.
Regards,
Stefan
Progress Telerik
Hello, Bob,
Thank you for your patience.
I was able to make an example of this.
The approach is a little different in React and requires using the Popup component and subscribing for the on mouse leave and on mouse enter events of the Chart surface.
This is an example:
https://stackblitz.com/edit/react-muv6yh?file=app/main.jsx
Regards,
Stefan
Progress Telerik
Rank 1