javascript - Bootstrap 多选内的工具提示

Question

我正在使用这个bootstrap multi-select 。我的目标是当鼠标悬停在菜单项上时显示工具提示。

多选似乎阻止了工具提示的显示。

Demo in jsFiddle

HTML:

<select name="menu[]" id="menu" class="multiselect" multiple="multiple">
    <optgroup label="Items">...
        <option id='one' value='1' title="Popover one" 
                data-toggle="tooltip" data-content="content one">1</option>
        <option id='two' value='2' title="Popover two" 
                data-toggle="tooltip" data-content="content two">2</option>
    </optgroup>
</select>

JS:

$('#menu').multiselect({
    maxHeight: 400,
    numberDisplayed: 1,
    nonSelectedText: 'All',
    enableCaseInsensitiveFiltering: true,
});

$("#one").tooltip({
    placement: 'right'
});
$("#two").tooltip({
    placement: 'right'
});

如何在多选中实现工具提示？

Answer 1

当你得到this warning时, jsFiddle 不是在开玩笑。 Github 确实不能作为 CDN，因为它以文本形式提供所有内容。添加正确的库( css 和 js )后，您将看到 Bootstrap Multiselect 如何转换您的元素。

这个原始标记:

<select id="menu" class="multiselect" multiple="multiple">
    <optgroup label="Items">
        <option id='one' value='1'>1</option>
        <option id='two' value='2'>2</option>
    </optgroup>
</select>

变成这样:

<ul class="multiselect-container dropdown-menu" >
    <li class="multiselect-item filter"><!-- truncated --></li>
    <li class="multiselect-item group" ><!-- truncated --></li>

    <li><a href="javascript:void(0);">
        <label class="checkbox">
            <input type="checkbox" name="multiselect" value="1"/> 1
        </label>
    </a></li>

    <li><a href="javascript:void(0);">
        <label class="checkbox">
            <input type="checkbox" name="multiselect" value="2"/> 2
        </label>
    </a></li>

</ul>

因此，元素#one不再出现在图片中。

因此，tooltip 函数的选择器必须进行一些更改。我们希望定位 .multiselect-container 子级的 li 元素。我们还想忽略 .filter 和 .group 元素。然后只需调用 tooltip 并根据需要编写 title 即可。

Demo in jsFiddle

$('.multiselect-container li').not('.filter, .group').tooltip({
    placement: 'right',
    container: 'body',
    title: function () {
        // put whatever you want here
        var value = $(this).find('input').val();
        return 'Has Value of ' + value;
    }
});