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工具提示不支持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屋！