How to give a selectmenu a tooltip in jquery ui?

Question

I'm replacing a select with the new jquery-ui selectmenu widget (well: 'covering' would be more precise).

On the select I could easily add a tooltip. I am using jquery-ui tooltip plugin.

I've tried but haven't managed to give the selectmenu one:

* The tooltip on the select does not work any more * Setting a tooltip to the top span of the selectmenu element ('.ui-selectmenu-button') didn't work either

Can it be done?

I'm using jquery ui 1.11.0

Answer 1

DEMO of jquery ui tooltip on jquery-ui selectmenu.

JS code:

$(function() {
     var select_id = "SelectMenu";
     $( "#"+select_id ).selectmenu();

     $( "#"+select_id+"-button").tooltip({items: "span", content: 'This is select'});
});

HTML:

<label for="SelectMenu">Selectmenu example:</label>
    <select name="SelectMenu" id="SelectMenu">
        <option id="option1" title="Tooltip1">option1</option>
        <option id="option2" title="Tooltip2">option2</option>
    </select>