在 bootstrap 多选下拉菜单上创建工具提示

Question

我正在尝试在使用 Bootstrap-select jQuery 插件创建的多 select 下拉菜单上添加工具提示...

这是我在 HTML 中定义 select 的方式...

<select id="dropDownList" 
        class="selectpicker" 
        title="Show Level" 
        multiple data-actions-box="true">
</select>

此下拉列表在运行时使用 JSON 文件填充，下拉列表的 header 是我在 HTML、'Show Level' 中设置的标题。

如何在上面添加工具提示？

Answer 1

Bootstrap 内置了方便的 javascript 工具提示。

调整您的标记：

<select id="dropDownList" 
        class="selectpicker" 
        title="Show Level" 
        multiple 
        data-actions-box="true"
        data-placement="top" 
        data-toggle="tooltip">
    <option>Hello!</option>
    <option>Hello Again</option>
</select>

--

data-placement 可以是 "top" "right" "left" 或 "bottom"

然后，在 javascript 中，定位元素并调用工具提示函数，如下所示：

$('#dropDownList').tooltip().attr('data-original-title', 'Here We Are!');

这是您需要设置工具提示中的文本的地方。通常，您会在实际标记中使用 title 属性或 data-original-title 属性设置它 however - 如果 title 属性存在于它将忽略的标记 data-original-title。将它设置为 javascript 我发现这是一个方便的解决方法（因为你确实需要 title 属性来做其他事情）。

这里有一个 bootply 可以看到它的实际效果：

Bootply -- 注意：请忽略css。我只是把它放在那里以将选项框移出屏幕边缘。

编辑 2

我改成用ID了。这是处理它的最佳方式，因此您可以控制在什么项目上显示什么工具提示。否则，所有工具提示都将相同。这是更新后的 Bootply

在 bootstrap 多选下拉菜单上创建工具提示

Create a tooltip on bootstrap multiselect dropdown

javascript

jquery

html

twitter-bootstrap

bootstrap-select