Tooltip: Only bind blur when opening via focus, mouseleave for mouseover. Remove the keep-open-on-focusout workaround. Now matching behaviour described in ARIA Authoring Practices. Fixes #8699 - Moving focus on click of a tooltipped element shows native tooltip in IE/Firefox on Windows

This commit is contained in:
Jörn Zaefferer 2012-10-19 18:16:11 -04:00
parent 77a55f1291
commit 6b48ef5eca
2 changed files with 17 additions and 15 deletions

View File

@ -90,6 +90,10 @@
offset: "0 -5"
}
});
$( "#blurs-on-click" ).tooltip().click(function() {
$( "#focus-on-me" ).focus();
});
});
</script>
</head>
@ -154,6 +158,9 @@
</div>
</div>
<button id="blurs-on-click" title="button title text">click me to focus something else</button>
<input id="focus-on-me">
<div class="group">
<p>Play around with focusing and hovering of form elements.</p>
<form>

View File

@ -206,7 +206,7 @@ $.widget( "ui.tooltip", {
},
_open: function( event, target, content ) {
var tooltip, positionOption;
var tooltip, positionOption, events;
if ( !content ) {
return;
}
@ -261,9 +261,7 @@ $.widget( "ui.tooltip", {
this._trigger( "open", event, { tooltip: tooltip } );
this._on( target, {
mouseleave: "close",
focusout: "close",
events = {
keyup: function( event ) {
if ( event.keyCode === $.ui.keyCode.ESCAPE ) {
var fakeEvent = $.Event(event);
@ -271,7 +269,14 @@ $.widget( "ui.tooltip", {
this.close( fakeEvent, true );
}
}
});
};
if ( !event || event.type === "mouseover" ) {
events.mouseleave = "close";
}
if ( !event || event.type === "focusin" ) {
events.focusout = "close";
}
this._on( target, events );
},
close: function( event, force ) {
@ -285,16 +290,6 @@ $.widget( "ui.tooltip", {
return;
}
// don't close if the element has focus
// this prevents the tooltip from closing if you hover while focused
//
// we have to check the event type because tabbing out of the document
// may leave the element as the activeElement
if ( !force && event && event.type !== "focusout" &&
this.document[0].activeElement === target[0] ) {
return;
}
// only set title if we had one before (see comment in _open())
if ( target.data( "ui-tooltip-title" ) ) {
target.attr( "title", target.data( "ui-tooltip-title" ) );