jQuery UI selectmenu 丢失 title 属性

Question

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

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

Answer 1

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

您需要在页面上找到新组，并将工具提示应用于它。 jQuery .selectmenu() 会将新组的 ID 设置为与您选择的相同，后缀为 "-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>