Bootstrap management with multiple "data switching"

Question

Is there a way to assign more than one event to the bootstrap control via "data-toggle". For example, let's say I want a button to have a hint and a “button” hint to it. Tried data-toggle = "tooltip button", but only the tooltip worked.

EDIT:

It's easy to get around with

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success"); 

Answer 1

If you want to add a modal and tooltip without adding javascript or changing the tooltip function, you can also simply wrap an element around it:

 <span data-toggle="modal" data-target="#id"> <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a> </span> 

Answer 2

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

 $(document).ready(function() { $('body').tooltip({ 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> 

Pay attention to data-tooltip .

Update

Or simply,

 $('[data-tooltip="tooltip"]').tooltip(); 

Answer 3

Not yet. However, it has been suggested that someone will add this feature one day.

The following Github download example is a great example of what you want. This is possible, but not without writing your own workaround code at this point.

Check this...: -)

https://github.com/twitter/bootstrap/issues/7011

Answer 4

I managed to solve this problem without having to change the markup with the following jQuery snippet. I had a similar problem when I needed a tooltip on a button that already used data switching for modal. All you have to do is add a caption to the button.

 $('[data-toggle="modal"][title]').tooltip(); 

Answer 5

This is the best solution I've just implemented:

HTML

 <a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a> 

JAVASCRIPT, which you should still include no matter what method you use.

 $('[rel="tooltip"]').tooltip(); 

Answer 6

I use href to load the modal file and leave the data switch for a tooltip:

 <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!" href="javascript:$('#id').modal('show');" > + </a> 

Answer 7

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

 $('.bootstrap-tooltip').tooltip(); 

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

Answer 8

Just to complement @ Roman Holzner's answer ...

In my case, I have a button that shows a tooltip, and it should remain disabled until the actions are completed. Using his approach, modal work, even if the button is disabled, because its call is outside the button - I ended up in the Laravel clip file to be clear :)

 <span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}"> <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled> <i class="fa fa-trash fa-fw"></i> </button> </span> 

So, if you want to show modality only when the button is active, you must reorder the tags:

 <span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled> <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled> <i class="fa fa-trash fa-fw"></i> </button> </span> 

If you want to verify it, change the attribute using jQuery code:

 $('button[name=delete]').attr('disabled', false); 

Answer 9

When you open a modal tag and want to show a tooltip, and if you implement a tooltip inside a tag, it will show a tooltip next to the tag. like this

I suggest using a div outside the tag and using "display: inline-block;"

 <div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;"> <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)"> <span class="fa fa-plus"></span> </a> </div> 

Answer 10

Another solution:

  <a data-toggle="modal" data-target="#exampleModalCenter"> <span class="tags" data-toggle="tooltip" data-placement="right" title="Tooltip text" > Text </span> </a>