Do not close the tooltip when input has focus after clicking

Question

How to make the tooltip not close if the input focus? It works when it focuses on the tab, but if I use the mouse to focus on the input, the tooltip will be closed on mouseout , even if the input has focus.

I can do

 $('input').tooltip().off("mouseover mouseout"); 

But this will blur the tooltip when you hover over, and I just need to cancel the mouseout when input has focus.

http://jsfiddle.net/3dX6d/2/
http://jsfiddle.net/3dX6d/3/

Answer 1

Try the following:

Working example

 $("input").tooltip({ close: function (event, ui) { //when the tooltip is supposed to close if ($('input').is(':focus')) { // check to see if input is focused $('input').tooltip('open'); // if so stay open } } }); 

New and improved method:

Improved Work Example

 $("input").tooltip({ hide: { effect: 'explode'// added for visibility } }).mouseleave(function () { // on mouse leave if ($('input').is(':focus')) { // if input is focused ui.tooltip.preventDefault(); //prevent the tooltip default behavior $('input').tooltip('open'); // leave the tooltip open } }).focusout(function () { // on focus out $('input').tooltip('close'); // close the tooltip }); 

API Documentation:
: focus
event.preventDefault ()
. focusout ()
open method
close event

Answer 2

Instead of adding all these other listeners, I looked at the actual data and decided that the most efficient way is to simply inherit the widget and add an additional flag

http://code.jquery.com/ui/1.10.3/jquery-ui.js

Here is a demo version of http://jsfiddle.net/3dX6d/7/

 (function ($) { $.widget("custom.tooltipX", $.ui.tooltip, { options: { focusPreventClose: false }, close: function (event, target, content) { if (this.options.focusPreventClose && $(this.element).is(":focus")) { // Don't call the parent close() call but therefore have to add event on focus out this._on({ focusout:this.close }); } else { this._superApply(arguments); } } }); }(jQuery)); $('input').tooltipX({ focusPreventClose: true }); 

Compared to another solution, this does not require us to work with additional open calls (which actually make several other calls inside it). We simply prevent the tooltip from closing when we focus on the element, as required by the initial publication.