twitter-bootstrap Bootstrap 将工具提示添加到下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26423406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap add tooltip to dropdown
提问by Steve
I am trying to add tooltip to Bootstrap, tried all solutions found on internet - nothing helps. Here is my dropdown(I am also using String and jstl tags):
我正在尝试向 Bootstrap 添加工具提示，尝试了在互联网上找到的所有解决方案 - 没有任何帮助。这是我的下拉列表（我也在使用 String 和 jstl 标签）：
<div class="btn-group" style="margin-bottom:5px; width: 100%;">
<a id="tableNameButton" data-placement="bottom" title="Text" class="my-tooltip my-dropdown tableNameButton btn btn-default btn-block btn-select" data-toggle="dropdown" href="#">Select table <span class="caret"></span></a>
<form:input class="form-control" id="tableNameFormId" path="tableName" style="visibility: hidden; display: none;" />
<ul id="tableName" class="dropdown-menu scrollable-menu">
<c:forEach items="${databaseTables}" var="databaseTable">
<li><a href="#">${databaseTable}</a></li>
</c:forEach>
</ul>
</div>
And on javascript:
在 javascript 上：
$('.my-dropdown').dropdown();
$('.my-dropdown').tooltip();
This thing doesn't work. Hope someone already solved this problem, thanks in advance.
这东西行不通。希望有人已经解决了这个问题，提前致谢。
回答by Pianoc
Check you have linked everything up correctly and included the bootstrap.js file. I have set up a JSFIDDLE with your code and the tooltip works:
检查您是否已正确链接所有内容并包含 bootstrap.js 文件。我已经用你的代码设置了一个 JSFIDDLE 并且工具提示有效：
http://jsfiddle.net/shannabarnard/ueoxmm9v/
http://jsfiddle.net/shannabarnard/ueoxmm9v/
<div class="btn-group" style="margin-bottom:5px; width: 100%;">
<a id="tableNameButton" data-placement="bottom" title="Text" class="my-tooltip my-dropdown tableNameButton btn btn-default btn-block btn-select" data-toggle="dropdown" href="#">Select table <span class="caret"></span></a>
<form:input class="form-control" id="tableNameFormId" path="tableName" style="visibility: hidden; display: none;" />
<ul id="tableName" class="dropdown-menu scrollable-menu">
<c:forEach items="${databaseTables}" var="databaseTable">
<li><a href="#">${databaseTable}</a></li>
</c:forEach>
</ul>
</div>
JS
JS
$('.my-dropdown').dropdown();
$('.my-tooltip').tooltip();
回答by Dmitry Shurshilin
I suppose it doesn't work because you didn't add data-attributes like data-toggle and data-placement. Try to add them and I think it'll work.
我想它不起作用，因为您没有添加数据属性，如数据切换和数据放置。尝试添加它们，我认为它会起作用。
See fiddle with working example: http://jsfiddle.net/h56xw8wq/1/
请参阅工作示例的小提琴：http: //jsfiddle.net/h56xw8wq/1/
You should have smth like
你应该像
<li class="dropdown" id="example" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" > ... </li>
Hope it'll help you:)
希望能帮到你：）
