Bootstrap: Collapse and Tooltip together

Question

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 1

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>

Solution 2

Another solution is to change trigger for tooltip. Default trigger is:

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

Which will work like this:

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

But you can change it to:

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

Which will work like this:

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

Comments

[Rikard]

Yes, I have read the question =) The problem is that the button should have both a toggle and a tooltip trigger. So my suggestion is to change from the default bootstrap trigger to another trigger (data-tooltip="true"). Then it won't be in conflict with the toggle function.

[Jay McVety]

I'd modify this slightly to just add to this solution $(function () { $('[data-tooltip="true"], [data-toggle="tooltip"]').tooltip() })