标签: kendo-tooltip

我正在努力尝试在网格单元上显示一个Kendo工具提示,从ajax调用中获取内容.我的工具提示声明如下所示:

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

在那个底部"else",我想关闭或隐藏工具提示,因为我没有属性"name",它被传递到我的ajax调用以显示内容.我已经尝试了以下所有方法:

$("#myGrid").data("kendoGrid").table.kendoTooltip.hide();
$("#myGrid").data("kendoTooltip").hide(); …

我在网格单元格中有kendoui工具提示有问题.在网格中我显示一个简单的文档文件夹.每行列出一个文件.在第一列中,我有一个小的预览图标和图像或文件的下载链接.如果我将鼠标悬停在图像上,则会调用工具提示.

例:

<a class="documents has_preview" href="<my_download_path>" title="<my_image_title>" data-url="<my_preview_image_path>">
<span class="icon preview_image image jpg has_image">
    <img src="<my_preview_icon_path>" border="0" alt="" />
</span>
<my_image_name>

工具提示插入如下:

<script id="template" type="text/x-kendo-template">
    <img src="#=target.data('url')#" alt="#=target.data('title')#" />
    <p>#=target.data('title')#</p>
</script>

$("#grid").kendoTooltip({
    filter: "a.has_preview",
    content: kendo.template($("#template").html()),
    position: "top"
});

问题是:

如果我第一次悬停图像名称,工具提示将不会显示在指定位置.在第二次悬停相同图像名称时,一切都正确显示...

任何人都可以给我一个暗示该怎么办？

非常感谢!菲利普

我有一个列,行中显示一些注释.由于音符很大,我已经缩短了控制器本身的音符并将其发送到我的aspx页面.我想要实现的是,我希望以鼠标悬停在网格行上的工具提示的形式显示完整的注释(或者如果可能的话,准确地在单元格上).有没有办法实现这个目标？任何帮助将受到高度赞赏.提前致谢.

我正在24px高的图形(在锚链接内)使用剑道工具提示.因此,当工具提示显示(底部的默认位置)时,它覆盖图形的底部三分之一,因此无法单击图形的底部三分之一.

我可以做以下事情:

.k-tooltip {
    margin-top: 8px;
}

但问题是,如果工具提示位于页面底部的图形上,则位置将是"顶部"而不是"底部",但它现在将覆盖大约1/2的图形而不仅仅是第三,因为它仍然被8px压低了.

我想要的是如果位置是底部,那么margin-top是8px,但如果位置是top,则margin-bottom是8px.

感谢您的任何帮助,您可以提供!

比利麦卡弗蒂

我正在尝试为我的网格创建一个工具提示,如下所示:

$("#grid").kendoTooltip({
    autoHide: true,
    showOn: "mouseenter",
    width:125,
    height:125,
    position: "right",
    filter: ".k-grid-content a.hasTooltip",
    content: kendo.template($("#storeTerritory").html())
});

模板定义:

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #for(var i = 0; i < Territories.length; i++){#
        #if (Territories != 'null' && Territories != '')  {#
            <p>#=Territories[i].TerritoryDescription#</p>
        #} else{#
            <p>Information not available</p>
      #}#
    #}#
</div>
</script>

我在这里设置了一个示例:http:
//jsbin.com/iJunOsa/21/edit

我得到了ReferenceError: Territories is not defined在控制台错误,当我鼠标移到"威尔顿"

假设我storeTerritory要用普通的HTML 替换模板的内容,然后出现工具提示:

<p>Wilton</p>

问题可能是什么？

我希望Kendo Tooltip在单击/触发打开时显示在鼠标旁边.似乎我只能打开它相对于这样的HTML元素:mytooltip.show('#area').虽然如何让它相对于鼠标位置显示？

如何删除/销毁创建的现有工具提示,如:

$(td[role=gridcell]").kendoTooltip({ ... });

例如,要销毁网格,请执行以下操作:

$("#grid").data("kendoGrid").destroy();

如何检查工具提示是否存在和/或是否已被销毁？

通过将参数e传递给内容的匿名函数,可以访问目标.

gridToolTipz = $('#grid').kendoTooltip({ 
    filter: "td[role=gridcell]",
    content: function (e) {
            var target = e.target; // the element for which the tooltip is shown
            ...
    },
    show: function(e) {
            var target = e.target; // the element for which the tooltip is shown
            ...
    }
});

是否有可能在展会上实现同样的目标？上面的代码不起作用.

我正在创建一个饼图，并且dataItem字段之一是以下格式的字符串：

“ Hello \ nWorld”

我在工具提示中显示它，并显示如下：“ Hello World”。忽略我的换行符

我希望它显示为：
“ Hello
World”

这可能吗？

我无法清除kendo工具提示.我的代码如下:

var tooltip = $("#DIV_ID").kendoTooltip();
tooltip.hide();

我也试过破坏事件,但工具提示没有得到正确清理.