Question

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

似乎多重选择会阻止显示工具提示。

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函数的选择器必须稍微改变一下。我们希望定位li的子元素.multiselect-container元素。我们还想忽略.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;
    }
});

Answer 2

不幸的是，在这种情况下，无法像引导程序那样添加工具提示。 Bootstrap通过在您选择的元素后面直接注入一些内容<div>，将其工具提示添加到页面中。（在你的情况下，＃one或#two）。 <optgroup>标记中只允许使用<option>和<select>标记，不会显示其他内容，这就是您的工具提示未显示的原因。看看这个select element documentation。

但是，如果您不在此处使用bootstrap工具提示插件，您将在选择内的<option> s上看到标题的浏览器工具提示。

Answer 3

根据bootstrap工具提示文档，您需要在工具提示中添加“container：body”选项。

http://getbootstrap.com/javascript/#tooltips

按钮组和输入组中的工具提示需要特殊设置在.btn-group或。中的元素上使用工具提示时 .input-group，你必须指定选项容器：'body' （记录如下）以避免不必要的副作用（如元素当工具提示时，变宽和/或失去圆角触发）。

在你的fiddler会话中，我注意到多选的插件在控制台中导致错误，在删除代码和多选的引用后，工具提示开始显示。

http://jsfiddle.net/ug4gj8tx/1/

$("#one").tooltip({container: 'body'});
$("#two").tooltip({container: 'body'});

定位略有偏差，因此您可能需要使用它来让它们显示在您想要的位置。

bootstrap multiselect内的工具提示

3 个答案:

Demo in jsFiddle