繁体   English   中英

Kendo-UI工具提示,带有交互式(可单击)内容

[英]Kendo-UI Tooltip with interactive (clickable) content

如果鼠标在工具提示目标上方工具提示内容(动态加载)上方,我希望工具提示保持打开状态,以便用户将鼠标从目标移动到工具提示并单击链接在内容上。

我正在寻找的一个很好的例子就是,当您将鼠标悬停在页面右侧的一个Friend上时,Facebook上会弹出一个弹出窗口……您将获得一个交互式弹出窗口。

我知道我可以通过关闭“自动隐藏”并在工具提示内容上添加“关闭”按钮来做到这一点,但是用户不希望这样做,(因为工具提示位于网格中并滑动鼠标也是不切实际的越过网格很容易导致工具尖端的负载打开并卡住)。

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

克里斯,干杯

我猜这正是您所需要的... 工具提示/事件工具提示/使用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:假

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM