This is a migrated thread and some comments may be shown as answers.

show tooltip only for grid elements that have ellipsis

3 Answers 306 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
marco
Top achievements
Rank 1
marco asked on 20 Dec 2013, 04:36 PM
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

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Dec 2013, 09:19 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
marco
Top achievements
Rank 1
answered on 23 Dec 2013, 11:38 AM
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


 
0
Dimo
Telerik team
answered on 24 Dec 2013, 02:40 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ToolTip
Asked by
marco
Top achievements
Rank 1
Answers by
Dimo
Telerik team
marco
Top achievements
Rank 1
Share this question
or