Tooltip: Adding tooltip causes select to automatically close

[slybox]

I added a jquery ui tooltip on a classic <select title="Cool tooltip">. It shows perfectly but when trying to select an element on the list, the cursor moving out of the <select> element makes the tooltip hides which is good, but also makes the dropdown list close, preventing the user from selecting an element from the list.

It appears on IE9 but is OK on chrome or firefox.

[tj.vantoll]

Verified in IE 7 - 10: ​http://jsfiddle.net/tj_vantoll/3gmHg/.

[Scott González]

I'm not sure there's anything we can do about this. IE triggers mouseleave when you hover over the options, and changing the title attribute causes the select to close: ​http://jsfiddle.net/3gmHg/3/

[slybox]

Well, I understand it may be hard to do anything to make it work on IE at the moment but if that's an issue, then you should consider adding a hack for IE in order to let it display the original "tooltip" and not the enhanced JQuery UI one, so that it doesn't block the user. Is that a possiblity ? Otherwise we can't user it (for it would prevent 1/3 of the users to select any value in those fields).

[tj.vantoll]

@slybox Just exclude select from whatever selector you're using to instantiate the jQuery tooltip.

[melkor1984]

Don't use:

<select class="tooltip" title="Some text">

Resolution:

<div class="tooltip" title="Some text">
<select>
</div>

Just wrap select in additional element with this tooltip

[tj.vantoll]

#9426 is a duplicate of this ticket.

[ScottGaines]

I ran into this issue an the resolution stated above would work if i could have used it. The program I was creating is a very complicated one and to detect a select that someone wanted to tooltip would have been a lot more code so I wrote an extension to do it so i could keep the title attribute on the select element ​http://jsfiddle.net/ghjqF/1/ View the external resources for the extension.

[Mixxi]

Too circumvent the IE "title" problem try the following. It is working at least in IE8. Sorry does not have any other IE version for testing at the moment.

HTML:

<select myTitle="My tooltip">

<option>A</option> <option>B</option> <option>C</option>

</select>

Javascript:

$("select").tooltip( {

items: "select[myTitle]", content: function() {

return $(this).attr("myTitle");

}

});

[ZeNz0r]

JSFiddle: ​http://jsfiddle.net/ZeNz0r/Sy7z9/

Using the custom content prevents IE11 from closing the select elements, you could do something like this in your HTML:

<select customText="Tooltip text">...

And simply grab that within: if ( element.is( "[customText]" ) )

[fastal]

We're showing the tooltip via scripting to indicate data entry errors. So we don't have to use the title attribute at all. Here is a solution somebody gave me to this problem I was having: ​http://stackoverflow.com/questions/26936300/jqueryui-tooltip-prevents-select-element-dropdown-from-staying-down-in-ie-11/26984825#26984825