jquery ui tooltip display on a select option

Question

Through JQueryUI, is there a way to have the tooltip (not the default), display for an optionset/dropdown's individual options?

I have a non-working Sample

I'm not asking for the selected option to display it's title, which is occurring in the sample.

My issue is that sometimes the tooltip, depending on the browser, displays behind the dropdown list when I hover over the option. This usually happens in Firefox or IE10.

Either that or it does not use the JQueryUI tooltip. Chrome just uses default tooltip

Below is my sample code if you don't want to look at JSFiddle:

$(function () {
    $(document).tooltip({items:"select,option,.optionClass",position:{ my: "left top", at: "left bottom"}
    }); 
});

Answer 1

jQuery UI tooltip works for <option> only if the size attribute is set for the <select>

Only if the size attribute is set on the select element, do the events necessary for tooltip to work actually fire. - source

Here's an updated example