'Bootstrap control with multiple "data-toggle"

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.

EDIT:

This is easily "workaroundable" with

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

Solution 1:^[1]

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

<span data-bs-toggle="modal" data-bs-target="modal">
    <a data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>

Solution 2:^[2]

Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine 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>

Notice the data-tooltip.

Update

Or simply,

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

Solution 3:^[3]

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.

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

Solution 4:^[4]

This is the best solution that I just implemented:

HTML

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

JAVASCRIPT that you anyway need to include regardless of what method you use.

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

Solution 5:^[5]

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

The following bootstrap Github issue shows a perfect example of what you are wishing for. It is possible- but not without writing your own workaround code at this stage though.

Check it out... :-)

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

Solution 6:^[6]

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:

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

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

Solution 7:^[7]

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

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

Solution 8:^[8]

Just for complement @Roman Holzner answer...

In my case, I have a button that shows the tooltip and it should remain disabled until furthermore actions. Using his approach, the modal works even if the button is disabled, because its call is outside the button - I'm in a Laravel blade file, just 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 the modal only when the button is active, you should change the order of 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 test it out, change the attribute with a JQuery code:

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

Solution 9:^[9]

One more solution:

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

Solution 10:^[10]

There is a nice solution using class .stretched-link. Button must have a class .position-relative. Here is a full working example:

Tooltip must be added to the button otherwise its position will be incorrect.

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

/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
    <span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
    Click Me!
</button>

<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Modal body</div></div></div></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

Solution 11:^[11]

When you opening modal on a tag and want show tooltip and if you implement tooltip inside tag it will show tooltip nearby tag. like this

I will suggest that use div outside a tag and use "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>

Solution 12:^[12]

I've also tried to use

<span></span>

but

<a></a>

worked great for me.

Here you are:

<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
<a data-bs-toggle="tooltip" title="Example">Some info here</a>
</button>

Even better, try to wrap the entire button (that uses popover) with a div:

<div data-bs-toggle="tooltip" title="Something">
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
Button label
</button>
</div>

Solution 13:^[13]

HTML (ejs dianmic web page): this is a table list of all users and from nodejs generate the table. NodeJS provide dinamic "<%= user.id %>". simply change for any value like "54"

<span type="button" data-href='/admin/user/del/<%= user.id %>' class="item" 
 data-toggle="modal" data-target="#confirm_delete">
    <div data-toggle="tooltip" data-placement="top" title="Delete" data- 
     toggle="modal">
       <i class="zmdi zmdi-delete"></i> 
    </div>
</span>

<div class="modal fade" id="confirm_delete" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
         data-backdrop="static">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticModalLabel">Static Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
      </div>
      <div class="modal-body">
        <p> This is a static modal, backdrop click will not close it. </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <form method="POST" class="btn-ok">
            <input  type="submit" class="btn btn-danger" value="Confirm"></input>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- end modal static -->

JS:

    $(document).ready(function(){
        $('#confirm_delete').on('show.bs.modal', function(e) {
            $(this).find('.btn-ok').attr('action', $(e.relatedTarget).data('href'));
        });
    });

Solution 14:^[14]

<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Phillip Senn
Solution 2
Solution 3	James Parker
Solution 4	MB Stephenson
Solution 5	obrientimothya
Solution 6	ankabot
Solution 7	Shadi Namrouti
Solution 8	Thiago Cardoso
Solution 9	Jackkobec
Solution 10	Jakub Muda
Solution 11	virender
Solution 12
Solution 13	Navas Ema
Solution 14	Ananth

'Bootstrap control with multiple "data-toggle"

Solution 1:[1]

Solution 2:[2]

Update

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]