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

Question

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

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

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

此下拉列表在运行时使用 JSON 文件填充，下拉列表的标题是我在 HTML 中设置的标题“显示级别”。

我怎样才能在上面添加工具提示？

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"or "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