Opened 7 years ago

Closed 7 years ago

Last modified 5 years ago

#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 7 years ago by tj.vantoll

Status: newopen
Summary: Dropdown closes when tooltip hides on IE9Tooltip: Adding tooltip causes select to automatically close

comment:2 Changed 7 years ago by 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/

comment:3 Changed 7 years ago by 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).

comment:4 Changed 7 years ago by tj.vantoll

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

comment:5 Changed 7 years ago by tj.vantoll

Milestone: 1.10.0none

comment:6 Changed 7 years ago by 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

comment:7 Changed 7 years ago by Scott González

Resolution: cantfix
Status: openclosed

comment:8 Changed 6 years ago by tj.vantoll

#9426 is a duplicate of this ticket.

comment:9 Changed 6 years ago by 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.

comment:10 Changed 6 years ago by 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");

}

});

comment:11 Changed 6 years ago by 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]" ) )

comment:12 Changed 5 years ago by 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

Note: See TracTickets for help on using tickets.