Hi Team,
My goal is to add a popover whenever a user hover on a scheduler item. I was using kendo tooltip until now but now the requirement is to use html tags in the tooltip content plus the content can be large sometimes so obviously I cant put it over title of a parent div to get the content for the tooltip.
I have added a popover after <Scheduler> component and the content of this popover is coming from the <SchedulerItem> children prop. Im creating the content for the popover inside <SchedulerItem> and on onmouseenter Im setting the content of popover in the local state and then that local state is remdered inside the popover . Things are working as expected but the popover is not opening as tooltip, the position of the popover is random. I tried to use the currentTarget’s boundries to calculate the offset from left and top but still unable to make the position look like kendo tooltip. I am new to ref thing so it would be really helpful you can provide the code for class based components.
Note: Im calling the <SchedulerItem> as a function not as a seperate class. A functiom in the same class is returning <SchedulerItem>.
1 Answer, 1 is accepted
Hi, Shivam,
An example that showcases how to use a Popover in the Scheduler as a tooltip is not available, however, I can share this example for a class-based component that illustrates how to set different positions as it might prove useful:
https://stackblitz.com/edit/react-n7hwva?file=app%2Fmain.jsx
As for the tooltip, it is possible to render HTML tags by using the content prop which can accept a JSX element or another component and the title property of the anchor element will be received as props.
Regards,
Filip
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!