带有链接的 jquery UI 工具提示 html [英] jquery UI tooltip html with links

问题描述

我想使用 jquery UI 工具提示.

I want to use jquery UI tooltip.

在工具提示中，我希望在 html 中有一个链接.

In the tooltip i want that there will be a link in html.

我看到了这个帖子(Jquery UI tooltip不支持html内容) 说明如何在工具提示中使用 html.

I saw this post (Jquery UI tooltip does not support html content) that says how to work with html inside the tooltip.

但是当我想在工具提示中添加链接时出现问题.

But there is a problem when I want to add link inside the tooltip.

当我用光标输入用于单击链接的工具提示时，工具提示消失了(因为我从分配给工具提示的元素中移出鼠标.

When I came with the cursor to enter the tooltip for clicking the link, the tooltip disappeared (because I mouseout from the element the assigned to the tooltip.

我能做什么?

谢谢.

更新:

  $(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

示例:http://jsfiddle.net/jLkcs/

推荐答案

由于 jQuery UI 工具提示的性质，无法开箱即用.

Because of the nature of the jQuery UI tooltip is not possible out of the box.

您可以添加一些技巧(在 jQuery 论坛上找到，但链接丢失了...)让工具提示延迟关闭并让您有时间点击链接.

You can add some trick (found on jQuery forum, but link lost...) to let the tooltip delay its closing and let you have the time to click the links.

使用的api文档:http://api.jqueryui.com/tooltip/

代码:

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
            },    
            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
        }
    });
});

演示:http://jsfiddle.net/IrvinDominin/jLkcs/5/

这篇关于带有链接的 jquery UI 工具提示 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！