javascript - 模态按钮上的 JqueryUI 工具提示在模态关闭时重新出现

Question

你好 StackOverflowvians!

我正在学习 Javascript 和 JQuery，但我遇到了一个我没有很好解决的难题。我在一些按钮上使用了 JqueryUI 工具提示。工具提示使用以下代码显示。我意识到我在代码方面的结构和组织能力很糟糕，而且可能还有一百万种更有效的方法来做我正在做的事情，但请耐心等待——这实际上是我第一次尝试任何类型的 javascript。

$(function() {

    $("#button-menu").tooltip({
         position: {
         my: "top",
         at: "bottom+10",
         using: function( position, feedback ) {
             $( this ).css( position );
             $( "<div>" ).addClass( "arrow" ).addClass( "top" ).appendTo( this );
        }
    }
});

$("#button-menu").tooltip({ hide: { effect: "fadeOut", duration: 100 }, show: {   effect: "fadeIn", duration: 100 }});
});       

因此，当您将鼠标悬停在按钮上时，我会调用工具提示，它很漂亮并且可以满足我的要求。当您单击其中几个按钮时，它们会打开模态对话框窗口。如果单击 a.search，将出现一个带有搜索表单的模态对话框窗口。如果决定简单地关闭模态窗口，它就会关闭等等。我注意到当模式打开时，工具提示关闭并且按钮的状态返回到未聚焦。当我关闭 Modal 时，工具提示会返回，就像我悬停在按钮上一样 - 无论我的鼠标位于何处。

我尝试为 div 中所有按钮的按钮项调用 blur on close，但无济于事。接下来我可能会尝试在该函数上设置超时，因为工具提示函数在按钮关闭事件后的某个地方重新设置了 aria-tooltip 类，我想如果我能等到它结束，我可以在它打开后关闭它，但感觉草率的。下面的代码是我对调用对话框和关闭对话框关闭按钮的工具提示的正确方法的解释，但它没有按照我认为应该的方式进行。工具提示仍然重新出现

 $(function() {
 $( "#searchform" ).dialog({
  modal: true,
  autoOpen: false,
  close: function( event, ui ) {$('a.search').blur();},
  show: {
    effect: "fade",
    duration: 500
  },
  hide: {
    effect: "fade",
    duration: 1000
  }
 });

 $( "a.search" ).click(function() {

 $( "#searchform" ).dialog( "open" );

 });
 });

编辑:我想我应该问这个问题 - 为什么会发生这种行为，我可以做些什么来确定工具提示是如何触发的，或者只是在我关闭模式时阻止它重新出现？

Answer 1

对话框小部件有一个 open() event .我倾向于让我们禁用工具提示 ( like so )，然后在 close() 上重新启用它们通过命名您的 init 函数并调用它。

类似于:

$('.dialogSelector').dialog({
  open: function( event, ui ) {
    $('.tooltipSelector').tooltip('disable');
  }
});

$('.dialogSelector').dialog({
  close: function( event, ui ) {
    $('.tooltipSelector').tooltip();
    // OR
    myTooltipFunction();
  }
});