button data-target switch - Bootstrap control with multiple “data-toggle”

4 Answers

Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine like this:

$(document).ready(function() {
        selector: "[data-tooltip=tooltip]",
        container: "body"

with this markup:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

Notice the data-tooltip.


Or simply,

text checkbox tooltip

Is there a way to assign more than one event to a bootstrap control via "data-toggle". For example, lets say I want a button that has a "tooltip" and a "button" toggle assigned to it.
Tried data-toggle="tooltip button", but only the tooltip worked.


This is easily "workaroundable" with


I managed to solve this issue without the need to change any markup with the following piece of jQuery. I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal. All you will need to do here is add the title to the button.


Since Bootstrap forces you to initialize tooltips only through Javascript, I changed data-toggle="tooltip" (since it's useless then) to class="bootstrap-tooltip" and used this Javascript to initialize my tooltips:


And so I was free to use the data-toggle attribute for something else (e.g. data-toggle="button").

I use href to load the modal and leave data-toggle for the tooltip:

    title="My Tooltip text!"