CODEWITHSUNDEEP
jqueryhtmlinternet-explorer
wh0
wh0

Reputation: 279

Unable to select options of a select box in internet explorer

I'm trying to do a custom tooltip for my webpage and everything seems to be fine except for select box and Internet Explorer (IE). After adding my tooltip, IE does not allow me to select any option. I can click the select box to show options, but then as soon as i mouse over the options, the select box closes itself.

You can observe it clearly using this jsfiddle. Try opening it in Firefox and Internet Explorer. In Firefox it works fine, but in IE, the select box closes itself as soon as you try to select one of the options.

How can I make it work properly in IE?

Upvotes: 2

Views: 1653

Answers (3)

webdeveloper
webdeveloper

Reputation: 17288

Do you really need title for this controls? You can use data attributes and everything will be fine. For example: http://jsfiddle.net/6MzD3/16/. Also look at Plugins/Authoring and create simple plugin for tooltip without hardcoded selectors.

Upvotes: 0

David Barker
David Barker

Reputation: 14620

You need to explicitly tell IE to stop propagation within your function as it is applying the hover to the child option elements as well.

$('*.tooltip').hover(function(e)
{
    e.stopPropagation();

    ...
}

Original Fiddle

This works in IE7, 8 and 9:

Added a conditional clause to check for a select box in the event object.

Updated Fiddle

Upvotes: 2

Fredy
Fredy

Reputation: 2910

Try close some line code, change it like this below:

 ...

   this.t = this.title;
   // this.title = "";
   $("body").append("<p id='tooltip'>"+ this.t +"</p>");
 ... 
   //this.title = this.t;
   $("#tooltip").remove();
 ...

Upvotes: 4

Related Questions