jQuery UI多个可选工具提示正在折叠

Question

我是jQuery UI的新手。

我正在尝试创建一个可选择的 jQuery UI工具提示。工具提示与页面上的链接相关联。

当链接被文本包围时，它可以正常工作。但是当彼此相邻的链接很少时，功能重叠并且工具提示不再平滑显示。

您可以在http://jsfiddle.net/zumot/Hc3FK/2/

上找到代码

JavaScript代码

下方

$("[title][data-scan]").bind("mouseleave", function (event) {
event.stopImmediatePropagation();
var fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
$(".ui-tooltip").click(function () {
    alert("I am clickable");
    return false;
});
$(".ui-tooltip").hover(
function () {
    clearTimeout(fixed);
},
function () {
    $("[title][data-scan]").tooltip("close");
});}).tooltip({
items: "img, [data-scan], [title]",
content: function () {
    var element = $(this);
    if (element.is("[data-scan]")) {
        var text = element.attr("href");
        return "<a href='http://www.google.com'>You are trying to open a tooltip  <span>" + text + "</span></a>";
    }
    if (element.is("[title]")) {
        return element.attr("title");
    }
    if (element.is("img")) {
        return element.attr("alt");
    }
},
position: {
    my: "right center",
    at: "left center",
    delay: 200,
    using: function (position, feedback) {
        $(this).css(position);
        $("<div>")
        .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo(this);
    }
}});

Answer 1

我尝试修复此问题的方法是将变量 fixed 设为全局（以便其他jQuery UI属性可访问），并在 Open < / strong>事件，隐藏任何其他先前打开的工具提示并清除fixed变量中保存的超时ID。

---

您可以在http://jsfiddle.net/zumot/dVGWB/找到解决方案 虽然要看到代码正常工作，但您必须直接在浏览器上运行它。

---

这是固定代码的快照。

    // Make the timeout id variable global
    var fixed = 0;

$("[title][data-scan]").tooltip({
    items: "img, [data-scan], [title]",
    content: function () {
        var element = $(this);
        if (element.is("[data-scan]")) {
            var text = element.attr("href");
            return "<a href='http://www.google.com'>You are trying to open a tooltip  <span>" + text + "</span></a>";
        }
        if (element.is("[title]")) {
            return element.attr("title");
        }
        if (element.is("img")) {
            return element.attr("alt");
        }
    },
    open: function (event, ui) {
        // When opening a new div, hide any previously opened tooltips first.
        $(".ui-tooltip:not([id=" + ui.tooltip[0].id + "])").hide();
        // clear timeout as well if there's any.
        if (tf > 0) {
            clearTimeout(tf)
        };
    },
    position: {
        my: "right center",
        at: "left center",
        delay: 200,
        using: function (position, feedback) {
            $(this).css(position);
            $("<div>")
                .addClass(feedback.vertical)
                .addClass(feedback.horizontal)
                .appendTo(this);
        }
    }
}).bind("mouseleave", function (event) {
    // stop defeulat behaviour
    event.stopImmediatePropagation();
    fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
    $(".ui-tooltip").hover(

    function () {
        clearTimeout(tf);
    }, function () {
        $("[title][data-scan]").tooltip("close");
    })
});