show tooltip only for grid elements that have ellipsis

4 posts, 0 answers
  1. marco
    marco avatar
    17 posts
    Member since:
    Apr 2013

    Posted 20 Dec 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. marco
    marco avatar
    17 posts
    Member since:
    Apr 2013

    Posted 23 Dec 2013 Link to this post

    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


     
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Dec 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready