当我将鼠标悬停在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。我怎样才能做到这一点?
最佳答案
<强> DEMO jquery-ui selectmenu 上的 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'});
关于jquery - 如何使用 jQuery UI 选择菜单为每个选项显示工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24922150/