JqueryUI Tooltip on modal button re-appears on modal close

Question

Hi there StackOverflowvians!

I'm learning to Javascript and JQuery and I've got a connundrum I'm not solving very well. I've used JqueryUI tooltips on some buttons. The tooltip uses the following code to display. I realize that my structure and organizational skills with regards to code suck, and there's probably a million more efficient ways to do what I'm doing, but bear with me - This is quite literally my first attempt at any kind of 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 }});
});       

So I'm calling a tooltip when you hover on the buttons, it's pretty and does what I want. A couple of the buttons when you click them lead to Modal Dialog windows. If one clicks a.search, one gets a modal dialog window with a search form. If one decides to simply close the modal window, it closes and whatnot. I note that when the modal is open, the tooltip closes and the state of the button returns to unfocused. When I close the Modal, the tooltip returns as if I'm hovering on the button - no matter where my mouse is positioned.

I tried to call blur on close for the button item for all buttons in the div, but to no avail. I might try setting a timeout on that function next, because somewhere the tooltip function is re-instating the aria-tooltip class after the button close event and I suppose if I can wait it out I can close it after it opens, but that feels sloppy. The code below was my interpretation of the correct way to call a dialog and close the tooltip for the button on dialog close, but it doesn't do what I think it should. The tooltip still re-appears

 $(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" );

 });
 });

edit: I suppose I should ask the question - why is this behavior happening, and is there something I can do identify how that tooltip is firing, or just stop it from reappearing when I close the modal?

Answer 1

The Dialog widget has an open() event. I'd be inclined to us it to disable tooltips (like so), and re-enable them on close() by naming your init function and calling it.

Something like:

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

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