Bootstrap：Collapse和Tooltip在一起 [英] Bootstrap: Collapse and Tooltip together

问题描述

我想知道是否可以在折叠锚标签上使用工具提示。用于折叠的代码是：

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

推荐答案

从 Bootstrap Javascript概述页面：

组件数据属性

不要使用同一元素上多个插件的数据属性。例如，一个按钮不能同时具有工具提示和切换模式。要做到这一点，请使用包装元素。

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>

这篇关于Bootstrap：Collapse和Tooltip在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！