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

jquery, kendo-asp.net-mvc, kendo-grid, kendo-tooltip, kendo-ui

Solution

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)

Problem

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?

Original source