#8798 closed bug (cantfix)

Opened November 09, 2012 03:54PM UTC

Closed February 04, 2013 05:11PM UTC

Last modified November 18, 2014 02:50PM UTC

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.

Attachments (0)

Change History (12)

Changed November 09, 2012 06:53PM UTC by tj.vantoll comment:1

status:	new → open
summary:	Dropdown closes when tooltip hides on IE9 → Tooltip: Adding tooltip causes select to automatically close

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

Changed November 14, 2012 10:12PM UTC by scottgonzalez comment:2

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/

Changed November 19, 2012 07:58PM UTC by slybox comment:3

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).

Changed November 23, 2012 06:40PM UTC by tj.vantoll comment:4

@slybox Just exclude

select

from whatever selector you're using to instantiate the jQuery

tooltip

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:5

milestone:	1.10.0 → none

Changed February 04, 2013 11:23AM UTC by melkor1984 comment:6

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

Changed February 04, 2013 05:11PM UTC by scottgonzalez comment:7

resolution:	→ cantfix
status:	open → closed

Changed July 15, 2013 12:15PM UTC by tj.vantoll comment:8

#9426 is a duplicate of this ticket.

Changed September 18, 2013 06:02PM UTC by ScottGaines comment:9

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.

Changed November 07, 2013 09:41PM UTC by Mixxi comment:10

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>

Javascript:

$("select").tooltip(

{

items: "select[myTitle]",

content: function()

{

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

}

});

Changed January 30, 2014 11:34PM UTC by ZeNz0r comment:11

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]" ) )

Changed November 18, 2014 02:50PM UTC by fastal comment:12

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

Search and Top Navigation