show tooltip only for grid elements that have ellipsis

[marco]

Hi Kendo team,
I have a grid to which I want to attach a tooltip; 
the tooltip should be shown only if the content of the gridcell is bigger than the cell, and the tooltip simply contains the text content of the cell.
I am not able to achieve this simple task.
 First I filtered for grid elements and I inserted the processing in the content property as

                    grid.table.kendoTooltip({
                        filter: "td:not(:empty)",       //no tooltip for empty field
                         content: function (e) {
                            var target = e.target; // element for which the tooltip is shown
                            if (isEllipsisActive(target[0])) {
                                return $(target).text();
                            }
                            else {
                                return "";
                            }
                        },
                        show: function (e) {
                            this.popup.wrapper.width("auto");
                        },
                        autoHide: true,
                        position: "bottom"
                    });

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

This approach substantially works, but for items that are totally visible, still a small gray stripe is shown as empty tooltip.

I thought to attach the processing to filter property, but I am not able to call a function from the filter property, i.e. something like

              filter: function (e) {
                            var target = e.target; 
                            if (target[0].role == "gridcell) {
                               if (isEllipsisActive(target[0])) {
                                  return true;
                               }
                            }
                            return false;
              },


Please give me a hint

Best regards and best wishes of Merry Christmas to all the team

Marco

[Dimo]

Hello Marco,

Currently the Tooltip is shown unconditionally.

One option is to change the showOn setting from "mouseenter" to "click", although this will not necessarily improve the user experience.

http://docs.kendoui.com/api/web/tooltip

Another option is to intercept the cells' "mouseenter" event and prevent event bubbling conditionally.

$("#grid").kendoGrid({
    // ...
});

$("#grid").data("kendoGrid").tbody.on("mouseenter", "> tr > td", function(e) {
    if (false) {
        // if a tooltip should not be displayed...
        return false;
    }
});

$("#grid").data("kendoGrid").table.kendoTooltip({
   // ...
});

Regards,
Dimo
Telerik

[marco]

Dear Dimo,
thanks for your answer, I succesfully used the second option, trapping the mouseenter event.
Now I am able to control the display of the tooltip, I have a further question though.
I am trying to dimension the tooltip according to the content. I started using the option width("auto").
If there are blanks in the string, the browsers seem to interpret the blank as a carriage return, so I tried to calculate the length in the show event as

 show: function (e) {
                            var target = e.sender.content[0];
                            var tiptxt = target.outerText;
                            var l = target.outerText.length * 3; 
                            var sl = l.toString();
                            this.popup.wrapper.width(sl);
}
it doesn't have any effect, while if I explicitely say width("400") it does, it even seems to treat "400" as the max length.
It is not fundamental, but can you please give me an explanation ?

Thank you for your kind attention,

regards

Marco


 

[Dimo]

Hello Marco,

Being an absolutely positioned element, the Tooltip tries to shrink itself (contrary to static block elements, which try to expand). If you don't want the content to wrap, the easiest thing to do is to simply disable this behavior with CSS.

.k-tooltip-content
{
   white-space: nowrap;
}

The above will influence all tooltips in your application, so you may want to limit the style to particular instances only. To do this, use a different (custom) CSS class, applied to an element, which wraps the tooltip content. You are already injecting the content manually anyway, so half of the job is done.

Regards,
Dimo
Telerik