jQueryUI Tooltip: Issues with IE select boxes

Question

For the life of me I cannot figure this out. The jQueryUI tooltip feature (relatively new) works perfectly on absolutely everything, in every browser. Except select boxes in IE! It seems for some reasons that IE is reading every "option" element as a very relevant part of the "select". Thus, while the tooltip works perfect even in IE when you merely hover over a select box, it breaks as soon as you click it.

I am using jQuery version 1.5 beta1 (though I have tested this in every version from 1.4 onward), and jQueryUI version 1.8.8.

Edit: An example of this may be seen at this location.

score 3 · Accepted Answer · answered Mar 01 '13 at 09:00

3

Here is a link to the bug: http://bugs.jqueryui.com/ticket/8798

The solution they suggest is just wrap the text in another element, for example a div, that will trigger the tooltip.

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

answered Mar 01 '13 at 09:00

David

4,336
2
23
31

There is an extension that wraps the "select" elements with span: http://www.ozzu.com/programming-forum/jquery-tooltip-select-box-error-t108441.html See "jquery.tooltipFix.js". – Rostislav Stribrny Jul 29 '15 at 14:50

score 2 · Answer 2 · answered Feb 09 '11 at 21:24

2

You can always detect the user agent header and display "Sorry, this site requires using a browser." when someone comes in with IE. :)

answered Feb 09 '11 at 21:24

Spajus

7,356
2
25
26

Hah! Yes I have done this in some personal websites (redirect them to download Chrome, etc) but unfortunately this is for a production environment for a client. I never did solve the issue by the way, I just resorted to making my own tooltips, and hoping jQueryUI improves theirs in the future. – Rαωs Feb 10 '11 at 04:34

score 1 · Answer 3 · edited Sep 29 '16 at 05:26

1

use this code for tooltip work on ie browser

$( "select" ).each(function(){$(this).wrap( "<span title='"+ $(this).attr("title")+"'></span>" );$(this).removeAttr("title");});

edited Sep 29 '16 at 05:26

Priya

1,359
6
21
41

answered Sep 29 '16 at 04:26

Banna

11
3

Better yet, use "select[title]" so you only wrap the selects that have a title. – iliask Jan 17 '20 at 10:40

jQueryUI Tooltip: Issues with IE select boxes

3 Answers3