Bootstrap: Collapse and Tooltip together

javascript jquery html twitter-bootstrap tooltip
neophyte picture neophyte · Jun 13, 2014 · Viewed 11.1k times · Source

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

Answer

awe picture awe · Jun 13, 2014

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>

Related questions

The data-toggle attributes in Twitter Bootstrap

What does data-toggle attributes do in Twitter Bootstrap? I couldn't find an answer in Bootstrap API. I have seen a similar question before as well, link. But it didn't help me much.

Read More
How to hide element using Twitter Bootstrap and show it using jQuery?

Let's say I create an HTML element like this, <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">…

Read More
Bootstrap Dropdown with Hover

OK, so what I need is fairly straightforward. I have set up a navbar with some dropdown menus in it (using class="dropdown-toggle" data-toggle="dropdown"), and it works fine. The thing is it works "onClick", while I would prefer if …

Read More