How do I show a tooltip with jQuery UI selectmenu for each option?

Question

When i mouse over the options in the selectmenu I want to show a custom tooltip. I can show it for normal buttons. Example:

<button id="helpbutton1" title="text in title">Help</button>

$( "#helpbutton1" )
    .button({
        })  
    .tooltip({ 
        content: returnHelpbutton1Content()                     
    });

But i can't get it to work with the selectmenu. When i mouse over the different options in the menu I want to be able to see the tooltip for each option. Example:

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

$( "#SelectMenu" ).selectmenu({ 
            width : 100,
            select: function( event, data ) {                   
                console.log("data.item.value: " + this.value);  
            }               
        });

$( "#option1" ).tooltip({ 
    content: returnTooltip1()                   
    });

$( "#option2" ).tooltip({ 
    content: returnTooltip2()                   
    }); 

I use jqueryUI 1.11.0. How can I make this work?

Answer 1

DEMO of jquery ui tooltip on jquery-ui selectmenu.

JS code:

 $(function() {
 var select_id = "speed";
 $( "#"+select_id ).selectmenu({
     open: function( event, ui ) {
         $('li.ui-menu-item').tooltip({
             items:'li',
             //content: "adsdads ad asdadad asd ad adoption"
             content:function(){
                 //console.log($(this).html());
                 return ($(this).html());
             }
         });
     }
 });

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