Question

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

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

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

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

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

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可以是＆＃34; top＆＃34; ＆＃34;右＆＃34; ＆＃34;左＆＃34;或＆＃34;底部＆＃34;

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

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

您需要在此处设置工具提示中的文本内容。通常情况下，您可以使用title属性在实际标记中进行设置，或者data-original-title属性但是 - 如果title属性存在于data-original-title属性中标记它将忽略{{1}}。在javascript中设置它我发现是一个方便的解决方法（因为你需要其他东西的title属性）。

这是一个可以看到它的动作：

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

编辑2

我将其更改为使用ID。这是接近它的最佳方式，因此您可以控制在哪个项目上显示哪个工具提示。否则，所有工具提示都是相同的。这是更新的Bootply

在bootstrap multiselect下拉列表上创建工具提示

1 个答案: