Bootstrap:折叠和工具提示在一起

Question

我想知道是否有可能在折叠锚标签上有工具提示.用于崩溃的代码是:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Data</a>

它工作正常,但现在我想添加一个工具提示.所以我将代码更改为:

<a data-toggle="collapse tooltip" title ="Tooltip Message" data-parent="#accordion" href="#collapseOne">Data</a>

现在它显示工具提示但崩溃功能不起作用.我需要做哪些改变才能使两种功能都有效.我知道锚标签的文本实际上可以显示我想用作工具提示消息的消息,但只是想知道它是否可以同时具有两种功能

Answer 1

从Bootstrap Javascript概述页面:

组件数据属性

不要在同一元素上使用多个插件的数据属性.例如,按钮不能同时具有工具提示并切换模态.要实现此目的,请使用包装元素.

试试这个:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  <span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>

Answer 2

另一个解决方案是更改工具提示的触发器。默认触发器是：

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

它将像这样工作：

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

但是您可以将其更改为：

$(function () {
  $('[data-tooltip="true"]').tooltip()
})

它将像这样工作：

<button type="button" class="btn btn-default" data-tooltip="true" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>