Question

JS

$(function(){
    $("select").multiselect();
    $( document ).tooltip();
    $( document ).tooltip( "option", "position", { my: "left+20 center", at: "right center" } );
});

HTML

<select multiple="multiple" size="5">
<optgroup label="England">
    <option title="example 1" value="London">London</option>
    <option title="example 2" value="Leeds">Leeds</option>
    <option title="example 3" value="option3">Manchaster</option>
</optgroup>
<optgroup label="USA">
    <option title="example 4" value="option4">New York</option>
    <option title="example 5" value="option5">Chicago</option>
</optgroup>
</select>

我正在使用Eric Hynds的多选小部件以及带有jQuery 1.9.1的jQuery UI工具提示小部件。

当用户将鼠标悬停在多选小部件中的每个项目上时，我希望显示工具提示。为此，我为小部件中的每个选项定义了“标题”属性。这很好用，除了多选小部件还有它自己的工具提示，它们包含每个选项 value 。因此，我为每个选项获得两个工具提示。

我想要禁用多选的固有工具提示，或者使我自己的工具提示与“标题”之外的其他属性一起使用（到目前为止，我找不到任何其他属性可以在标记内工作）。或者，还有其他想法吗？

Answer 1

WORKING JS FIDDLE

所以基本上，发生的事情是多选插件正在添加，并且所有输入的额外title属性都是创建的，因此jquery ui也会自动在那些工具提示上发挥其魔力。

一个简单的解决方法是在jquery ui启动之前删除multiselect添加的title属性。

注意：在我的例子中，我删除了所有输入标题道具。在您的生产环境中，您可能不想这样做，因此如果您愿意，可以提高效率并使用此类内容：

$('_multiselect_widget_id').find('input').prop('title', '');

继承我的工作代码：

$(function(){
    $("select").multiselect();
    $('input').prop('title', '');


    $( document ).tooltip();
    $( document ).tooltip( "option", "position", { my: "left+20 center", at: "right center" } );
});

Eric Hynds使用jquery ui工具提示小部件进行多选小部件冲突

1 个答案: