带有链接的 jquery UI 工具提示 html

Question

我想使用 jquery UI 工具提示。

在工具提示中，我希望有一个 html 格式的链接。

我看到这篇文章 ( Jquery UI tooltip does not support html content )，其中介绍了如何在工具提示内使用 html。

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

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

我能做什么？

谢谢。

更新:

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

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

Answer 1

由于 jQuery UI 工具提示的性质，不可能开箱即用。

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

使用的 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/