#8798 closed bug (cantfix)
Tooltip: Adding tooltip causes select to automatically close
Reported by: | slybox | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.tooltip | Version: | 1.9.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
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.
Change History (12)
comment:1 Changed 10 years ago by
Status: | new → open |
---|---|
Summary: | Dropdown closes when tooltip hides on IE9 → Tooltip: Adding tooltip causes select to automatically close |
comment:2 Changed 10 years ago by
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/
comment:3 Changed 10 years ago by
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).
comment:4 Changed 10 years ago by
@slybox Just exclude select
from whatever selector you're using to instantiate the jQuery tooltip
.
comment:5 Changed 10 years ago by
Milestone: | 1.10.0 → none |
---|
comment:6 Changed 10 years ago by
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
comment:7 Changed 10 years ago by
Resolution: | → cantfix |
---|---|
Status: | open → closed |
comment:9 Changed 9 years ago by
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.
comment:10 Changed 9 years ago by
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");
}
});
comment:11 Changed 9 years ago by
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]" ) )
comment:12 Changed 8 years ago by
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
Verified in IE 7 - 10: http://jsfiddle.net/tj_vantoll/3gmHg/.