Using jquery ui dialog with tooltip causes tooltip display on opening, not hover

Question

I set up the tooltip and dialog like so:

$(document).ready(function() {
    $( "#dialog" ).dialog({ autoOpen: false });
    $( document ).tooltip();

but when i open the dialog later its close tooltip always appears on opening, NOT just on hovering over close as expected. Has anyone else seen this behaviour/knows why it occurs?

Answer 1

Setting the items option to exclude the dialog's titlebar close widget seems to work well for me in jQueryUI 1.9+

$( document ).tooltip({
  items: '*:not(.ui-dialog-titlebar-close)'
});

Answer 2

Found a solution:

$( "*" ).tooltip();
$('.ui-dialog-titlebar-close').tooltip('disable')

works in place of the above

Answer 3

Tooltip appears because a button automatically gets focus when a dialog opens (this is a strange behavior). You need to add an attribute "tabindex" to any element in the dialog to avoid this.

For example:

<table tabindex="1">

Answer 4

According to dialog's documentation:

Upon opening a dialog, focus is automatically moved to the first item that matches the following:

• The first element within the dialog with the autofocus attribute
• The first :tabbable element within the dialog's content
• The first :tabbable element within the dialog's buttonpane
• The dialog's close button
• The dialog itself

So my solution was to add autofocus to an empty div at the top of the form I was using in my dialog:

<form action="" method="post" accept-charset="utf-8">
  <div class="stealFocus" autofocus></div>