如何为每个选项显示带有 jQuery UI 选择菜单的工具提示？答案

【问题标题】：How do I show a tooltip with jQuery UI selectmenu for each option?如何为每个选项显示带有 jQuery UI 选择菜单的工具提示？
【发布时间】：2014-09-15 07:49:33
【问题描述】：

当我将鼠标悬停在selectmenu 中的选项上时，我想显示一个自定义工具提示。我可以为普通按钮展示它。示例：

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

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

但我无法让它与选择菜单一起使用。当我将鼠标悬停在菜单中的不同选项上时，我希望能够看到每个选项的工具提示。示例：

<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。我怎样才能使这项工作？

【问题讨论】：

标签： jquery jquery-ui tooltip jquery-ui-tooltip jquery-ui-selectmenu

【解决方案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'});

【讨论】：

此示例为您提供了整个选择菜单的工具提示。如果选择菜单打开，是否可以为每个选项显示一个？所以一个慢的工具提示另一个慢的工具提示，...
我已经编辑了我的代码和演示。现在它也显示每个选项的工具提示！看看吧！
谢谢！这正是我想要的！
此示例为页面中的所有选择菜单应用工具提示！如果您有多个 jQueryUI 选择菜单，它将适用于所有菜单。

【解决方案2】：

Rahul 的解决方案适用于页面中的所有选择菜单。这是一个更简单的解决方案，它不绑定到“打开”事件，并且可以应用于任何特定的选择菜单（假设这个对象存在并且已经被初始化为一个选择菜单）：

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

【讨论】：