Bootstrap: Collapse and Tooltip together

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>