Kendo UI: Conditionally preventing a Tooltip from being displayed on a Grid cell

Question

I'm working on trying to display a Kendo tool tip on a grid cell, getting the content from an ajax call. My tooltip declaration looks like the below:

    var grid = $("#myGrid").data("kendoGrid");

    grid.table.kendoTooltip({
        width: 300,
        height: 200,
        opacity: 0,
        callout: true,
        position: 'right',
        animation:
        {
            close: {
                effects: "fade:out"
            },
            open: {
                effects: "fade:in",
                duration: 1000
            }
        },
        contentTemplateId: "tooltipTemplate",
        filter: "td",
        show: function (e) {

        },
        content: function (e) {
            var target = e.target;
            currentTarget = target;

            var message = "Loading...";
            if ($(currentTarget[0]).attr("name") !== undefined) {
               //Do ajax call, show tool tip
            }
            else {
                //CLOSE THE TOOTLIP
                return false;
            }
        }
    });

In that bottom "else", I want to close or hide the tooltip since I don't have the attribute "name", which is passed into my ajax call to show the content. I've tried all of the following:

$("#myGrid").data("kendoGrid").table.kendoTooltip.hide();
$("#myGrid").data("kendoTooltip").hide();
e.sender.popup.destroy();
e.sender.popup.hide();
e.sender.popup.close();

None of these work! Destroy is the closest, but I can't recreate the tool tip when I need it again. Any advice?

Answer 1

The tooltip is implemented in a way that makes this difficult. You could call this.hide() wrapped in a setTimeout, but it will have a flicker effect. So you'll probably have to roll your own solution for this. Here's an idea to get you started:

Create a beforeShow pseudo-event which is triggered before the tooltip is shown (this could all be done in a more sophisticated fashion):

// customize the _show method to call options.beforeShow 
// to allow preventing the tooltip from being shown..
kendo.ui.Tooltip.fn._show = function (show) {
    return function (target) {
        var e = {
            sender: this,
            target: target,
            preventDefault: function () {
                this.isDefaultPrevented = true;
            }
        };

        if (typeof this.options.beforeShow === "function") {
            this.options.beforeShow.call(this, e);
        }
        if (!e.isDefaultPrevented) {
            // only show the tooltip if preventDefault() wasn't called..
            show.call(this, target);
        }
    };
}(kendo.ui.Tooltip.fn._show);

Use it like this to conditionally prevent showing the tooltip:

var toolTip = $('#grid').kendoTooltip({
    filter: ".tooltip",
    beforeShow: function (e) {
        if ($(e.target).data("name") === null) {
            // don't show the tooltip if the name attribute contains null
            e.preventDefault();
        }
    },
    content: function (e) {
        var row = $(e.target).closest("tr");
        var dataItem = grid.dataItem(row);

        return "<div>Hi, this is a tool tip for id " + dataItem.Id + "! </div>";
    }
}).data("kendoTooltip");

(demo)

Answer 2

I hope my post is not too late, but will help few of us. This can be achieved with show and hide events where we can validate the Tooltip text and show or hide the Tooltip as below and works for me.

  show: function(e){
        if(this.content.text() !=""){
            $('[role="tooltip"]').css("visibility", "visible");
        }
    },
    hide: function(){
        $('[role="tooltip"]').css("visibility", "hidden");
    },

Full code :

 $("#GridId").kendoTooltip({
    filter: "td:nth-child(1)", //this filter selects the second column's cells
    position: "right",
    autoHide: false,
    show: function(e){
        if(this.content.text() !=""){
            $('[role="tooltip"]').css("visibility", "visible");
        }
    },
    hide: function(){
        $('[role="tooltip"]').css("visibility", "hidden");
    },

    content: function(e){
        var dataItem = $("#GridId").data("kendoTreeList").dataItem(e.target.closest("tr"));
        var content = dataItem.ToolTip;
        if (content!=null) {
            return content;
        }
        else {

            return "";
        }

    }
}).data("kendoTooltip");