我正在尝试在我使用 Bootstrap-select jQuery 插件创建的多选下拉菜单上添加工具提示...
这是我在 HTML 中定义选择的方式...
<select id="dropDownList"
class="selectpicker"
title="Show Level"
multiple data-actions-box="true">
</select>
此下拉列表在运行时使用 JSON 文件填充,下拉列表的标题是我在 HTML 中设置的标题“显示级别”。
我怎样才能在上面添加工具提示?
最佳答案
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
关于javascript - 在 bootstrap 多选下拉菜单上创建工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35900588/