1

我是 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);
    }
}});
4

1 回答 1

1

My attempt to fix the issue was by making the variable fixed global (to make it accessible by other jQuery UI properties), and on Open event, hide any other previously opened tooltips and clear the timeout id saved in fixed variable.

You can find the solution here http://jsfiddle.net/zumot/dVGWB/ , though to see the code working properly, you'll have to run it directly on your browser.

Here's the snapshort of the fixed code.

    // 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");
    })
});
于 2013-03-19T11:32:08.680 回答