I'm using a kendoTooltip on a Listview with a custom content function set up like this:

return acontrol.kendoTooltip({
        width: 220,
        height: 280,
        position: "right",
        show: function(e) {},
        autoHide: false,

showAfter: 1000,

content: function(e) {},

hide: function(e) {}

}).data("kendoTooltip");

I have the autoHide set to false in the tooltip and am setting timeouts on the show function, mouseout, and mousenter of the tooltip itself in order to hide the tooltip after x amount of time, but when I move to the following element, it hides the tooltip anyway.  Putting e.preventDefault()) in the hide function prevents the timeout from hiding the tooltip, but it doesn't stop the tooltip from being hidden on moving to a different item in the listview, even though I see that the content function fires for the new listview item (the show function never does). I need the autoHide set to false as actually trying to work with any of the information within the tooltip is difficult without quickly moving the mouse into the tooltip. How can I work around this? My solution works fine if the tooltip has timed out when moving to the next item, but if the timeout has not expired, it hides it and doesn't display the new data retrieved.

Want to show dyanmic kendotooltip (may be another view - lots of content) on image hover inside kendogrid

ex:

I am adding and icon here and want to show the tooltip

info.Bound(e => e.Id).Width(50).ClientTemplate("<img id='#= Id #' src='../Images/commandView.png' /><div id='TooltipContentDiv'></div>");

I am not sure but is this something I am trying but not working:

    $("#AjaxGrid").kendoTooltip({
        //filter: ".tooltipContent",
        filter: "td:nth-child(3)",
        width: "auto",
        position: "top",
        showOn: "click",
        autoHide: false,
        content: function (e) {
            var row = $(e.target).closest("tr");
            var dataItem = $('#AjaxGrid').data('kendoGrid').dataItem(row);
            Id = dataItem.Id
            $('#TooltipContentDiv').html("");
            $.ajax({
                url: "@Url.Action("GetToolTip1", "Tools")",
                data: { "Id": Id },
            cache: false,
            /async: true,
            success: function (result) {
                alert('yes');
                $('#TooltipContentDiv').html(result);
            },
            error: function () { alert('no');}
        });
    }
    }).data("kendoTooltip");

Any help is appreciated.

If there is full working example that will be great.

I might be on wrong path but please point me what is the easiet way to do whatever I want.

Hi , I have model  with iterating items to show the list of items and I want to show tooltip for each item description. Please help me. 

below is the code snippet.

 </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <ul class="single">
                        <li>
                            @Html.ActionLink(item.Name, "LoadValue", "Category", new { item.BusinessId, ViewBag.Environment }, null)
                        </li>
                    </ul>
                </td>
            </tr>
        }

I am new to Kendo. and am confused how to bind the tooltip  for each item here.

Hello All,

I cannot add a tooltip to both a toolbar button and a action button located in the grid row. Please look at my example exmple http://dojo.telerik.com/@iakhmedov1/aRUle and get it working.

Thanks,

Igor

Hi,

I have attached a tooltip to a button. Next to the button is an iframe. When hovering the button, the tooltip shows. But when exiting the button area (slowly) into the iframe area, the tooltip often fails to autohide. Any ideas on why this is happening and how to fix this?

I have created a simple dojo example but since I cannot save it ("Failed to create snippet"), I have attached it in this post.

Regards,
Ron

I've implemented a DropDownList in a custom editor for a Grid column as follows.

                    $("#control").kendoGrid({
                        dataSource: controlDs,
                        editable: true,
                        saveChanges: function (e) {
                            if (!confirm("Are you sure you wish to save changes?")) {
                                e.preventDefault();
                            }
                        },
                        toolbar: ["save","cancel"],
                        sortable: true,
                        columns: [
                                {
                                    title: "Artifacts",
                                    headerAttributes: {
                                        style: "font-size: 10pt; font-weight: 600; text-align: center;"
                                    },
                                    columns: [
                                        {
                                            field: "family",
                                            editor: customDropDownEditor,
                                            headerAttributes: {
                                                style: "font-size: 10pt; font-weight: 600;"
                                            },
                                            title: "Family",
                                            width: 120
                                        },
                                        {
                                            field: "artifact",
                                            editable: function (dataItem) {
                                                return false;
                                            },
                                            headerAttributes: {
                                                style: "font-size: 10pt; font-weight: 600;"
                                            },
                                            title: "Artifact",
                                            template: '<a href="#=artifact#" target="_blank">#=title#</a>'
                                        }
                                    ]
                                }
                            ]
                    });

                function customDropDownEditor(container, options) {
                    $('<input required name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: ["one", "two", "three", "four"]
                        });
                }

This works perfectly. Now, how do I attach a ToolTip widget to the items in this DropDownList?

Thanks in advance.

Hi, I'm new to Kendo UI

I'm facing the problem in Spreadsheet when Tool tip  is used with filter is applied for particular range tool tip is not working for each cell.

(I've specified the link here) http://dojo.telerik.com/oLOHA/11 In this link tool tip is not working( for  1st column till 15th row) so I'm not getting the solution for this please guide me about this...