具有交互式(可点击)内容的Kendo-UI工具提示

时间:2016-02-03 17:32:35

标签: jquery kendo-ui kendo-tooltip

如果鼠标位于工具提示目标之上,如果它高于工具提示内容(动态加载),我希望我的工具提示保持打开状态,以便用户可以移动鼠标从目标到工具提示,然后单击内容中的链接。

我正在寻找的一个很好的例子就是当你将鼠标悬停在页面右侧的朋友身上时出现在Facebook上的弹出窗口...你会得到一个交互式弹出窗口。

我知道我可以通过关闭AutoHide并在工具提示内容中添加“关闭”按钮来做到这一点,但是用户不希望这样做(因为工具提示在网格中并且它也是不切实际的)将鼠标滑过网格很容易导致大量工具提示打开并卡住打开。

有人这样做过吗?小心分享你的JS? 我很惊讶它不是内置的小部件选项...

干杯, 克里斯

1 个答案:

答案 0 :(得分:0)

这正是您所需要的...... Tooltip / Events Tooltip / Loading content with AJAX < /强>

        $("#products").kendoTooltip({
            filter: "a",
               content: {
                  url: "../content/web/tooltip/ajax/ajaxContent1.html"
               },
               width: 220,
               height: 280,
               position: "top",
               requestStart: function(e) {
                  e.options.url = kendo.format(urlFormat, e.target.data("id"));
              }
        });

如果您在浏览器中检入网络标签,那么当您将鼠标悬停在图片上方时,您将能够看到产品名称已加载到工具提示中。

同样,您可以加载工具提示内容。

  • autoHide:false

在声明工具提示时设置此选项。请检查此链接: Tooltip / Events

$("#autohide-false").kendoTooltip({
    autoHide: false,
    show: onShow,
    hide: onHide,
    position: "top",
    content: "Hello!"
});

可以加载内容部分,如上例所示。