Jquery ui tooltip on jquery ui selectmenu and span tag

by Rahul Gupta

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
     <span id="sp">This is span</span><br><br>
     <button id="helpbutton1" title="text in title">Help</button><br>
     
     <label for="speed">Select a speed</label>
<select name="speed" id="speed" title="This is select">
<option title="This is slower">Slower</option>
<option  title="This is slow">Slow</option>
<option selected="selected"  title="This is medium">Medium</option>
<option  title="This is fast">Fast</option>
<option  title="This is faster">Faster</option>
</select>

CSS

label {
display: block;
margin: 30px 0 0 0;
}
select {
width: 200px;
}
.overflow {
height: 200px;
}

JavaScript

$(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'});
     
    $('#sp').tooltip({
        items: "span",
        content: "Awesome title!"
    });
     
     
$( "#helpbutton1" )
    .button({
        })  
    .tooltip({
        content: 'This is button'                    
    });
});