Question

我在工具提示中使用jquery UI。我希望在同一页面上有多个，并在点击时打开和关闭它们。我找到了一个点击打开它的解决方案： http://jsfiddle.net/rjGeS/83/ （取自此链接 - ＆gt; jQueryUI tooltip Widget to show tooltip on Click）

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

我尝试稍微修改代码以使其正常工作，但它只是打开它们

$('#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 Tooltips无关，我将提供一个干净的示例。

您可以使用open()和close()功能以编程方式显示和隐藏工具提示。如果您还需要停止默认的工具提示功能（如在mouseover事件中显示它们），则可以使用disabled选项轻松实现此目的。

由于你没有指明这是否应该是click-once-show-all，所以这里有一个小提琴：http://jsfiddle.net/wuL9M/这里是一个小提琴：http://jsfiddle.net/qnYRy/ < / p>

请注意以下这一行：

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

在工具提示打开时禁用默认关闭行为。

如果您只想部分保留默认工具提示功能的部分，则可以使用自定义标记（而不是disabled选项），或者您可以附加额外的事件处理程序tooltipopen和tooltipclose。 It's all pretty well documented here

ADD：您可以使用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属性。

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

1 个答案: