twitter-bootstrap Bootstrap：折叠和工具提示一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24200652/
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: Collapse and Tooltip together
提问by neophyte
I want to know if its possible to have tooltip on a collapse anchor tag. The code which is use for collapse is:
我想知道是否可以在折叠锚标记上显示工具提示。用于折叠的代码是：
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Data</a>
It works fine but now I want to add a tooltip to it. So I changed the code to:
它工作正常，但现在我想为其添加工具提示。所以我把代码改成：
<a data-toggle="collapse tooltip" title ="Tooltip Message" data-parent="#accordion" href="#collapseOne">Data</a>
Now it shows the tooltip but the collapse function does not work. What changes I have to do so that both functionality works. I know the text of anchor tag can actually show the message I want to use as tooltip message but just want to know if its possible to have both functionality together
现在它显示了工具提示，但折叠功能不起作用。我必须做哪些更改才能使这两个功能正常工作。我知道锚标记的文本实际上可以显示我想用作工具提示消息的消息，但只是想知道是否可以同时使用这两种功能
回答by awe
From the Bootstrap Javascript overview page:
Component data attributes
Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
组件数据属性
不要在同一元素上使用来自多个插件的数据属性。例如，按钮不能同时具有工具提示和切换模式。为此，请使用包装元素。
Try this:
试试这个：
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>
回答by Rikard
Another solution is to change trigger for tooltip. Default trigger is:
另一种解决方案是更改工具提示的触发器。默认触发器是：
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Which will work like this:
这将像这样工作：
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
But you can change it to:
但您可以将其更改为：
$(function () {
$('[data-tooltip="true"]').tooltip()
})
Which will work like this:
这将像这样工作：
<button type="button" class="btn btn-default" data-tooltip="true" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
