각 옵션에 jQuery UI selectmenu가있는 툴팁을 표시하려면 어떻게합니까?

Question

selectmenu의 옵션 위로 마우스를 가져 가면 사용자 정의 툴팁을 표시하려고합니다. 정상적인 버튼으로 표시 할 수 있습니다. 예 :

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

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

그러나 selectmenu로 작동시키지 못합니다. 메뉴의 여러 옵션 위에 마우스를 올려 놓으면 각 옵션에 대한 툴팁을 볼 수 있습니다. 예 :

<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()     
    }); 

저는 jqueryUI 1.11.0을 사용합니다. 이 작품을 어떻게 만들 수 있습니까?

Answer 1

DEMO jquery-ui 선택 메뉴의 jquery ui 툴팁.

JS 코드 :

$(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'}); 

Answer 2

라울의 용액은 페이지 모든 선택 메뉴를인가한다.

$('#myselectbox').selectmenu("menuWidget").tooltip({ 
    items:'li', 
    content: function() { 
     return ($(this).html()); 
    } 
});