在引导程序多选下拉菜单上创建工具提示

Create a tooltip on bootstrap multiselect dropdown

本文关键字：创建 工具提示 下拉菜单 引导程序      更新时间：2023-09-26

我正试图在使用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可以是"顶部"、"右侧"、"左侧"或"底部">

然后，在javascript中，以元素为目标并调用工具提示函数，如下所示：

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

这是您需要设置工具提示中文本的位置。通常，您会在具有title属性或data-original-title属性的实际标记中设置它，但-如果标记中存在title属性，则会忽略data-original-title。我发现用javascript设置它是一个方便的解决方法(因为您确实需要title属性来处理其他内容(。

这里有一个bootply来看看它的作用：

Bootply-注意：请忽略css。我把它放在那里只是为了把选项框从屏幕边缘移开。

编辑2

我把它改为使用ID。这是处理它的最佳方式，这样你就可以控制在什么项目上显示什么工具提示。否则，所有工具提示都将相同。这是更新的Bootply

相关文章：