Tooltip: Replace blur with focusout to deal with inputs nested in tooltipped elements.

diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js
index 99e1fbd7977f04b0d0bbc32f22b50d4f56dbece6..bf60c3cdc3d4e2845d282b9da06c4d525d8de935 100644 (file)
--- a/tests/unit/tooltip/tooltip_events.js
+++ b/tests/unit/tooltip/tooltip_events.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" );

diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html
index b282a73b7b461a8b2138572eafb426ccc8889231..eb51d56c6e36eba5f1a103ad86e497c08388ca48 100644 (file)
--- a/tests/visual/tooltip/tooltip.html
+++ b/tests/visual/tooltip/tooltip.html
@@ -23,8 +23,8 @@
 
                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"
@@ -32,7 +32,7 @@
                        $("#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,23 +126,23 @@
        <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;">
@@ -150,11 +150,11 @@
                        <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>

diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js
index cb23e9a4dda882a4fb253eab78106ec06e081fed..6a41f8c4a778a593351d28c25775effbab5cbc2f 100644 (file)
--- a/ui/jquery.ui.tooltip.js
+++ b/ui/jquery.ui.tooltip.js
@@ -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 } );
        },