Tooltip onmouseover event of a custom button in Kendo?

Question

I create a Kendo grid edit button like so:

command: [{
    name: "MyEdit",
    click: myFunc,
    template: "<a id= 'myEdit' class='k-grid-MyEdit k-button'><span class='k-icon k-i-edit'></span></a>"
}]

My requirement is when I hover on the button, a kendo tooltip should show up. Since kendo command custom button does not have a built-in onmouseover or onhover event, I found the following solution to trigger onmouseover event:

$(grid.element).on("mouseover mouseenter", ".k-grid-MyEdit", function(e) {
   alert("Hello"); //this works   
   //implement tooltip here
});

I tried implementing a kendo tooltip but was not able to destroy it. Please help me out.

Answer 1

You don't need to implement your own tooltip mechanism: you can directly use Kendo UI tooltip.

To add a tooltip to your button, you add the following declaration:

$(grid.element).kendoTooltip({
    filter: ".k-grid-MyEdit",
    width: 120,
    position: "top", 
    content: 'My tooltip'
});

Here how it works:

• you create a kendoTooltip on the element that contains whatever elements you want to display on tooltip on (here, your grid)
• the filter attribute is a selector: the tooltip will show on all the children elements that match the selector (so here, your buttons)
• the content attribute is what you want to display in your tooltip (it can also be a template)

I've created a jsFiddle to demonstrate: https://jsfiddle.net/7ue2zq45/1/