Skip to content
Permalink
Browse files

Tooltip: Replace blur with focusout to deal with inputs nested in too…

…ltipped elements.
  • Loading branch information...
jzaefferer committed Feb 23, 2012
1 parent fa40c35 commit 58a5e23a7882e4438e60e354f3f2125562f9a540
Showing with 27 additions and 20 deletions.
  1. +3 −3 tests/unit/tooltip/tooltip_events.js
  2. +22 −15 tests/visual/tooltip/tooltip.html
  3. +2 −2 ui/jquery.ui.tooltip.js
@@ -47,9 +47,9 @@ test( "focus events", function() {
element.trigger( "focusin" );

element.one( "tooltipclose", function( event ) {
same( event.originalEvent.type, "blur" );
same( event.originalEvent.type, "focusout" );
});
element.trigger( "blur" );
element.trigger( "focusout" );
});

asyncTest( "mixed events", function() {
@@ -74,7 +74,7 @@ asyncTest( "mixed events", function() {

// blurring is async in IE
element.one( "tooltipclose", function( event ) {
same( event.originalEvent.type, "blur" );
same( event.originalEvent.type, "focusout" );
start();
});
element.simulate( "blur" );
@@ -23,16 +23,16 @@
function enable() {
// default
$("#context1, form, #childish").tooltip();
$("#context1, form, #childish, #nested-input").tooltip();
// custom class, replaces ui-widget-content
$("#context2").tooltip({
tooltipClass: "ui-widget-header"
});
$("#right1").tooltip({
tooltipClass: "ui-state-error"
});
// synchronous content
$("#footnotes").tooltip({
items: "[href^='#']",
@@ -65,7 +65,7 @@
return "Loading...";
}
});
// custom position
$("#right2").tooltip({
tooltipClass: "ui-state-highlight",
@@ -75,7 +75,7 @@
offset: "0 10"
}
});
$("#button1").button();
$("#button2").button({
icons: {
@@ -97,7 +97,7 @@
});
}
enable();
$("#disable").toggle(function() {
$(":ui-tooltip").tooltip("disable");
}, function() {
@@ -126,35 +126,35 @@
<div id="right1" style="position: absolute; right: 1em" title="right aligned element">
collision detection should kick in around here
</div>

<div id="footnotes" style="margin: 2em 0">
<a href="#footnote1">I'm a link to a footnote.</a>
<a href="#footnote2">I'm another link to a footnote.</a>
</div>

<div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position">
right aligned with custom position
</div>

<div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen">
gets its content via ajax
</div>
<div id="ajax2" style="width: 100px;" class="ui-widget-content" title="never be seen">
gets its content via ajax, caches the response
</div>

<div id="context2" class="ui-widget ui-widget-content">
<span title="something" style="border:1px solid blue">span</span>
<div title="something else" style="border:1px solid red;">
div
<span title="something more" style="border:1px solid green;">nested span</span>
</div>
</div>

<div id="childish" class="ui-widget ui-widget-content" style="margin: 2em 0; border: 1px solid black;" title="element with child elements">
Text in <strong>bold</strong>.
</div>

<form style="margin: 2em 0;">
<div>
<label for="first">First Name:</label>
@@ -165,17 +165,24 @@
<input id="last" title="Your last name is optional" />
</div>
</form>


<div id="nested-input">
<label title="test"><input type="checkbox">This is a test</label>
<label title="test2"><input type="checkbox">This is a test</label>
<label><input type="checkbox" title="test3">This is a test</label>
<label><input type="checkbox" title="test4">This is a test</label>
</div>

<div id="buttons">
<button id="button1" title="Button Tooltip">Button Label</button>
<button id="button2" title="Icon Button">Button with Icon</button>
<button id="button3">Icon Only Button 1</button>
<button id="button4">Icon Only Button 2</button>
</div>

<div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
<div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>

<button id="disable">Toggle disabled</button>
<button id="toggle">Toggle widget</button>
</div>
@@ -157,7 +157,7 @@ $.widget( "ui.tooltip", {

this._bind( target, {
mouseleave: "close",
blur: "close",
focusout: "close",
keyup: function( event ) {
if ( event.keyCode == $.ui.keyCode.ESCAPE ) {
var fakeEvent = $.Event(event);
@@ -193,7 +193,7 @@ $.widget( "ui.tooltip", {
});

target.removeData( "tooltip-open" );
target.unbind( "mouseleave.tooltip blur.tooltip keyup.tooltip" );
target.unbind( "mouseleave.tooltip focusout.tooltip keyup.tooltip" );

this._trigger( "close", event, { tooltip: tooltip } );
},

0 comments on commit 58a5e23

Please sign in to comment.
You can’t perform that action at this time.