Hello, I would like to create my own icon component that includes a tooltip. I created a small sample project on stackblitz for this. Unfortunately, the icon and the tooltip don't work quite right in the example project, but that's not important for my question.
My goal would be for the two icon components to be displayed in a line next to each other by default.
After executing, if I assign the style attribute <div style="display: inline-block"> to the div that wraps the span, it works the way I want it to.
I'm assuming the tooltip behind the scenes creates this construct, which I can't directly access in the code via the <tooltip> tag. Is there a way to find out which CSS class one would need to access to enable the desired behavior.
I would be very happy about a solution proposal. Thanks in advance.
1 Answer, 1 is accepted
Hello,
That occurs as the Tooltip wraps all child elements inside a div in order to attach its events.
A possible solution is to attach the event to a custom DOM element and style it as required:
https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip/tooltip-customization/
The idea is that we can take the component ref and sets its event to a DOM element instead of wrapping all elements in a Tooltip.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1