Jquery工具提示-多个工具提示

Question

我使用jquery作为工具提示。我希望有多个在同一页上，并让他们打开和关闭的点击。我找到了一个在点击时打开它们的解决方案：http://jsfiddle.net/rjGeS/83/ (取自-> 单击jQueryUI工具提示控件显示工具提示的链接)

我需要帮助的是在一个页面上有多个工具提示。

我试图稍微修改代码以使其工作，但它只是打开了所有的代码。

$('#tooltip_1').click(function() {
var $this = $(this);

$(".tooltip").html(function() {
    $('.ttip').css({
        left: $this.position() + '20px',
        top: $this.position() + '50px'
    }).show()

}).fadeIn();

});

$('#tooltip_2').click(function() {
var $this = $(this);

$(".tooltip").html(function() {
    $('.ttip').css({
        left: $this.position() + '20px',
        top: $this.position() + '50px'
    }).show()

}).fadeIn();

});

Answer 1

您发布的示例代码实际上与jQueryUI工具提示无关，我将给出一个简单的示例。

您可以使用open()和close()函数以编程方式显示和隐藏工具提示。如果您还需要停止默认的工具提示功能(如在mouseover事件上显示它们)，那么简单的方法就是使用disabled选项。

由于您没有指定是否应该单击-一次显示-全部或不显示，这里有一个小提琴为所有人做它：http://jsfiddle.net/wuL9M/和小提琴单独做：http://jsfiddle.net/qnYRy/

请注意这一行：

    $(".tooltip").off("mouseleave focusout");

当工具提示打开时，它将禁用默认的关闭行为。

如果希望只部分保留默认工具提示功能的某些，则可以使用自定义标志(而不是disabled选项)，也可以将额外的事件处理程序附加到tooltipopen和tooltipclose。这里都有很好的记录。

添加:您可以使用content选项来使用任何(可能是非静态的)数据自定义工具提示。例：http://jsfiddle.net/qnYRy/1/，您可以在使用option函数初始化之后更改它：

$("#myTooltip").tooltip("option", "content", "My updated tooltip data");
$("#myTooltip").tooltip("option", "content", function() { return "My updated tooltip data"; });

由于明显的原因，这将要求您分别设置每个工具提示的内容。还请注意，它将忽略您可能拥有的任何html title属性。