Search code examples
javascriptjqueryhtmltwitter-bootstraptooltip

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

Solution

  • 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>