Bootstrap control with multiple "data-toggle"

Question

Is there a way to assign more than one event to a bootstrap control via "data-toggle"? For example, let's 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");

score 415 · Accepted Answer · edited Apr 28 '22 at 17:18

415

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>

edited Apr 28 '22 at 17:18

Phillip Senn

46,771
90
257
373

answered Feb 04 '15 at 08:30

Roman Holzner

5,738
2
21
32

11

That is actually the best approach because it defers the concern of presentation to the presentation layer. – I Stand With Russia Feb 04 '15 at 16:39
5

There's some difference though: a `data-toggle="tooltip"` inside the main (button) element will show neatly outside of that element whereas it will overlap with that element if set inside a span wrapper. – neydroydrec Aug 23 '15 at 09:04
1

Short, Simple and Smart Solution. Adding Span to Anchor tag doesn't change the design in bootstrap So this is the Perfect Solution for running model and tooltip together. – always-a-learner Aug 16 '17 at 10:59
this didn't work for me `` – shorif2000 Oct 30 '17 at 10:57
This approach breaks `btn-group`s (even with ` – wondra Apr 08 '19 at 07:37
If the user clicks on the button, then chooses to exit the modal, the tooltip is frozen in place. You can no longer click once to make it disappear. Does anyone know any solutions for this issue? – Caleb Jul 21 '23 at 15:41

Melvin · Answer 2 · 2014-08-26T14:25:30.070

85

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();

edited Aug 26 '14 at 14:25

answered Jan 22 '14 at 02:58

Melvin

5,798
8
46
55

11

Simplified this with: $('[data-tooltip="tooltip"]').tooltip(); – Ryan Currah Jul 21 '14 at 22:49
3

Used your Updated answer and was very easy, worked perfectly – The One and Only ChemistryBlob Jan 12 '16 at 14:25
1

best than wrapping nice solution – Zamblek Aug 30 '16 at 21:47
3

The problem with this (and other solutions in this question right now) is that when you click to open the modal, and then close it, the tooltip shows up again (or stays visible) even though the mouse has left the button. This is very annoying if you e.g. have buttons in a table on every row, as they might block the button above/below. Only way to hide it is to click somewhere outside of the tooltip. – hug Sep 28 '16 at 20:36
You may want to use the first JS part as this registers the tooltips on `ready()` event. Without it, the tooltip will be registered whenever the JavaScript file is loaded. Or combine both @RyanCurrah 's code within `ready()` event. – Roland Sep 12 '18 at 12:44
1

I love this approach much more than the accepted answer with the wrapper. It's very simple as it expands on the HTML5 capacities without overloading the DOM too much. Also in my case the wrapper approach did not seem to work – Canelo Digital Jul 25 '19 at 19:23

score 12 · Answer 3 · answered Jul 06 '15 at 08:03

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();

score 11 · Answer 4 · edited Jan 18 '18 at 20:17

11

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();

edited Jan 18 '18 at 20:17

MB Stephenson

169
1
12

answered Aug 13 '16 at 11:33

Jacques Koekemoer

1,378
5
25
50

1

This is the cleanest, least obtrusive answer – Smyrnian Sep 26 '19 at 09:05

score 8 · Answer 5 · answered May 06 '13 at 16:11

8

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

answered May 06 '13 at 16:11

obrientimothya

121
5

Sadly, that issue (#7011) has been declined. – T.J. Crowder Sep 24 '14 at 17:51

score 4 · Answer 6 · answered Apr 20 '18 at 19:59

4

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").

answered Apr 20 '18 at 19:59

Ermac

1,181
1
8
12

Great. Add HTML too. – Web_Developer May 08 '18 at 08:07

score 3 · Answer 7 · answered Oct 31 '17 at 10:35

3

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>

answered Oct 31 '17 at 10:35

Shadi Alnamrouti

11,796
4
56
54

score 2 · Answer 8 · answered Apr 06 '17 at 14:05

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);

score 2 · Answer 9 · answered Jan 12 '19 at 20:53

2

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>

answered Jan 12 '19 at 20:53

Jackkobec

5,889
34
34

score 2 · Answer 10 · answered Aug 05 '19 at 17:54

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>

score 1 · Answer 11 · answered Sep 20 '17 at 17:18

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>

Andrew · Answer 12 · 2021-01-03T23:04:25.470

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>

Nice tip with the outer div. Problem with the padding of button is now avoided. — Ryan G, Aug 09 '22 at 16:44

score 0 · Answer 13 · answered Feb 12 '21 at 08:41

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'));
        });
    });

Lucifer · Answer 14 · 2023-03-06T11:02:46.140

You can just change the toggle needed by adding 2 lines of javascript the usual HTML attributes

const tooltipTriggerList = document.querySelectorAll('[tooltip="true"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Now, instead of data-bs-toggle='tooltip', use tooltip="true".

Finally, your Html would look like :

<button tooltip="true" data-bs-placement="top" title="Your tooltip here"/>

Working Demo :

const tooltipTriggerList = document.querySelectorAll('[tooltip="true"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>



<button id="someid" style="margin:34px; height:33px !important" type="button" class="btn btn-secondary col-1 w-25 h-25  " tooltip="true" data-bs-placement="top" title="This button opens modal and also displays a tootip using different names for data-bs-toggle and initiating them with js" data-bs-toggle="modal" data-bs-target="#exampleModal">
      <i  class="fa fa-cog"></i> 
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

et Voila !

score -2 · Answer 15 · answered May 23 '20 at 05:12

-2

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

answered May 23 '20 at 05:12

Ananth

1
2

Bootstrap control with multiple "data-toggle"

15 Answers15

Update

Linked