I would like to accomplish the behavior shown in this example with Kendo React.
$("#grid").kendoTooltip({
filter: "th:nth-child(2)", // Select the th elements of the Grid.
position: "bottom",
content: function(e){
// Return the text content of the hovered header.
return e.target.text();
}
}).data("kendoTooltip");With Kendo React I'm doing the following
<Tooltip
filter={(target) => target.matches("th:nth-child(2)")}
position="bottom"
content={({ target }) => target.textContent}
anchorElement="target"
>
<Grid
ref={(instance) => {
if (instance) {
const columnHeaders = instance.element.querySelectorAll("th:nth-child(2)");
columnHeaders.forEach((header) => {
header.setAttribute("title", "something for tooltip to work");
});
}
}}
>...</Grid>
</Tooltip>This works fine if I hover over the blank space around the column header text (target = <th>), but if I hover over the column header text (target: <span> within <th>) the tooltip doesn't show. If I make the modification below then it shows, but the position is wrong, the tooltip shows right below the text and not below the <th> element.
<Tooltip
filter={(target) => target.matches("th:nth-child(2)") || target.closest("th:nth-child(2)")}
position="bottom"
content={({ target }) => target.textContent}
anchorElement="target"
parentTitle
>
<Grid
ref={(instance) => {
if (instance) {
const columnHeaders = instance.element.querySelectorAll("th:nth-child(2)");
columnHeaders.forEach((header) => {
header.setAttribute("title", "something for tooltip to work");
});
}
}}
>...</Grid>
</Tooltip>The example below has the behavior I want to achieve with Kendo React. No matter where I hover within my filter selector it shows the tooltip with respect to the filter selector.
https://docs.telerik.com/kendo-ui/knowledge-base/grid-with-kendo-ui-tooltip
1 Answer, 1 is accepted
Hello, Luis,
The tooltip is positioned wrongly because of the selected element inside the filter. It is possible to achieve the same behavior and tooltip positioning as in the provided link by wrapping the Grid with the Tooltip component and setting the position property to right like shown in this example:
https://stackblitz.com/edit/react-79tp4r?file=app/main.jsx
We recommend this approach.
In case this is not enough to solve your issue, can you please provide a runnable example so that we can assist further?
I hope this helps.
Regards, Filip Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Filip,
The solution seems to work fine till I add the 'columnMenu' prop (for allowing column filtering) in the GridColumn. I am able to display either the tooltip or the filter but not both.
Is there a way I can do both?
Thanks.
Siva
Hi, Siva,
This can be achieved by using the headerCell prop in order to render the GridColumnMenuWrapper and the tooltip can be displayed by setting the title of the container.
I created an example that showcases this approach here:
https://stackblitz.com/edit/react-febfzz-51tmra?file=app/main.jsx
The tooltip is shown for the first column Product ID.