2

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

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

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'
});

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

4

3 回答 3

3

当您收到此警告时，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. 我们也想忽略.filterand.group元素。然后只需调用tooltip并编写您title想要的任何内容。

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;
    }
});
于 2014-08-12T19:46:46.873 回答
1

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

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

于 2014-08-12T18:43:48.440 回答
0

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

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

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

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

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

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

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

于 2014-08-12T18:44:59.170 回答