loxdog loxdog - 8 months ago 274
jQuery Question

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

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");

width: 300,
height: 200,
opacity: 0,
callout: true,
position: 'right',
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 {
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:


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


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);

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
    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>";