jQuery UI selectmenu 失去标题属性

Question

我正在尝试结合使用 jQuery UI 选择菜单和工具提示来创建悬停在选择菜单上的工具提示。问题是，当您在元素上调用 selectmenu() 时，jQuery 似乎删除了导致工具提示不显示在该元素上的 title 属性。调用 $('#element').attr("title", "Test") 什么都不做。

如何设置 jQuery 选择菜单的标题属性？

Answer 1

这将不起作用，因为您在页面上看到的 select 不再是您的 select 列表。它是由 .selectmenu() 创建的新元素组，样式看起来像 select。

您需要在页面上找到新组，并将工具提示应用于它。 jQuery .selectmenu() 会将新群组的 ID 设置为与您的 select 相同，后缀为 "-button".

$(function () {
    $("#number").selectmenu();
    
    $("#number-button").attr("title", "").tooltip({
        content: function () {
            return "some tooltip";
        }
    });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<select name="number" id="number" title="test">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
</select>

jQuery UI selectmenu 失去标题属性

jQuery UI selectmenu loses title attribute

html

jquery

jquery-ui