CODEWITHSUNDEEP
kendo-gridellipsiscsskendo-tooltip
cortomaltese_marcof
cortomaltese_marcof

Reputation: 155

show kendo tooltip only when ellipsis is active

I want to show a tooltip when the content of a kendo grid element is only partially visible. I am not able to control the display of a tooltip on the elements of a kendo grid.
I saw this issue has been discussed but I'm not able to find The problem, it seems to be the values of offsetWidth and scrollWidth. The ellipsis works as expected defining in a css 

.k-grid td {
    white-space: nowrap;
    text-overflow: ellipsis;
    table-layout: fixed;
}

As I saw on this forum I use a function to detect when ellipsis, namely 

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

and I call it on the mouseenter event as 

kendoGrid.tbody.on("mouseenter", "> tr > td", function (e) {    
    var target = e.target;    
    if (isEllipsisActive(target)) {    
        return target.outerText;    
    }    
    return false;    
});

The problem is that misteriously I get scrollWidth and offsetWidth equal, while I expected scrollWidth to vary according to the content of the element.
How is this possible, and what am I doing wrong ?
Thanks for any help
best regards

Marco

Upvotes: 2

Views: 4165

Answers (1)

Vlad Bezden
Vlad Bezden

Reputation: 89725

Here is an example of how to show tooltip only when there is a text with ellipsis (partially visible in the cell) and don't show tooltip if there is a full text is visible or if there is no text in the cell.

Upvotes: 2

Related Questions