引导多选内的工具提示答案

【问题标题】：Tooltip inside bootstrap multiselect引导多选内的工具提示
【发布时间】：2014-08-13 04:29:56
【问题描述】：

我正在使用这个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'
});

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

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-multiselect

【解决方案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;
    }
});

【讨论】：

【解决方案2】：

很遗憾，在这种情况下，无法像 bootstrap 那样添加工具提示。 Bootstrap 通过在您选择的元素之后直接注入带有一些内容的<div> 来将其工具提示添加到页面。（在你的情况下，#one 或 #two）。 <select> 标签内只允许使用<optgroup> 和<option> 标签，其他内容不会显示，这就是您的工具提示没有显示的原因。看看这个select element documentation。

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

【讨论】：

【解决方案3】：

根据引导工具提示文档，您需要将“容器：正文”选项添加到您的工具提示中。

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

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

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

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

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

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

【讨论】：