Question

我有这段代码：

(...)
if (data.hasSentMessages === true){
  $("#sentMessages")
    .parent()
    .removeClass("ui-state-disabled");
} else {
  $("#sentMessages")
    .parent()
    .addClass("ui-state-disabled");
}

然后，如果element已禁用类，我想在jQuery-UI Tooltip中显示为什么禁用了元素。但不幸的是，它显示在第二次鼠标悬停事件后。当我读到这个：Tooltip not showing on first mouseover我创造了这样的东西：

$("#sentMessages").tooltip({disabled: !($("#sentMessages").parent().hasClass("ui-state-disabled"))});
if($("#sentMessages").data("tooltip") === false){
  $("#sentMessages").tooltip({disabled: !($("#sentMessages").parent().hasClass("ui-state-disabled"))}).triggerHandler("mouseover");
}

如果小部件未初始化，则此条件应手动触发鼠标悬停事件，但遗憾的是它仍无法正常工作。如果有人想帮助我，我会很高兴 - 提前谢谢你。

有一个简化的小提琴：jsFiddle that shows a problem，你可以看到第二个工具提示是好的但首先就像是标准的“浏览器工具提示。

Answer 1

在你的小提琴中，工具提示的初始化发生在mouseover回调函数中。这意味着直到第一次鼠标悬停事件之后才会创建工具提示。

其次，mouseover事件构建在jQueryUI工具提示功能的方式中。因此，您可以删除鼠标悬停代码。

第三，您曾提到工具提示只应在父元素具有类ui-state-disabled时显示。

查看JSFiddle上的结果。

// construct a tooltip for each sentMessages then listen for the 
// tooltipopen event an evaluate if it should show the tooltip
// or not
$("#sentMessages").tooltip().on('tooltipopen', function(){
    if ($(this).parent().hasClass('ui-state-disabled')){
        $(this).tooltip("enable");

    } else {
        $(this).tooltip("disabled");
    }
});

// comment out this line to replicate a non error state
$("#sentMessages").parent().addClass("ui-state-disabled");

我希望这会有所帮助。

Answer 2

根据您的示例小提琴：将e.stopImmediatePropagation()添加到mouseover事件，请参阅更新的fiddle：

第二次鼠标悬停后显示jQuery-UI工具提示

2 个答案: