I will sometimes see the wrong tooltip label in cells on my grid. I want the tooltip to appear on the hover anywhere in a particular td that has messages to display. These messages are based on props of the dataItem being available. There are a few problems.
- Sometimes the tooltip will show the wrong content
- The tooltip jumps between the td and the svg/path from fontawesome-react. The svg/path does not have a title so I don't understand why it anchors there instead of the td.
- My grid is inside a splitter. Sometimes the tooltip will jump to the top/left of the splitter pane and be visible while I am in edit mode.
1 & 2 are visible/reproducible in my stackblitz. I have been unable to replicate 3 in stackblitz so I was wondering if it was related to my splitter (not implemented in stackblitz to save time..)
Ideally I would only have one <Tooltip component for my grid but it becomes unnatural to me to have to iterate state from the Grid component instead of at the cell level. I do want the tooltip to be interacted with via the icon when in edit mode as well but I have not implemented that here. Is there a better approach that preferably avoids the use of globals?
- https://stackblitz.com/edit/react-oqd7oe
- https://react-oqd7oe.stackblitz.io/
- I've attached a gif displaying problems 1 & 2
1 Answer, 1 is accepted
Thank you for the details and the example.
After inspecting it I have a couple of suggestions that may prove helpful:
1) The Tooltip may show the wrong content because a Tooltip is initialized per TD element these are creating multiple Tooltip instances which may create an overlapping of the elements. When the Grid should have a Tooltip we recommend wrapping the entire Grid inside a Tooltip, this will ensure that the internal ToolTip logic will determine which content to be shown based on the currently hovered element.
2) The SVG path element actually has a title set to "undefined" string. This is causing the undesired effect. The filter property of the Tooltip can be used to handle this case:
https://www.telerik.com/kendo-react-ui/components/tooltip/api/TooltipProps/#toc-filter
3) As for the issue with the Splliter, please check if the Splliter has a title attribute as if the mouse is moving and detects an element with the title it will take it as an anchor and set is positioned based on the element dimensions.
I modify the example to demonstrate the approach:
https://stackblitz.com/edit/react-oqd7oe-fqhwdx?file=app%2Fmain.js
If I missed a detail in the example, please let me know and I will test it again.
Regards,
Stefan
Progress Telerik