CODEWITHSUNDEEP
buttontwitter-bootstrapbinding
LastTribunal
LastTribunal

Reputation: 1

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

Upvotes: 205

Views: 174206

Answers (15)

virender
virender

Reputation: 4647

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

enter image description here

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>

enter image description here

Upvotes: 2

Lucifer
Lucifer

Reputation: 147

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 🎉 !

Upvotes: 1

Roman Holzner
Roman Holzner

Reputation: 5928

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>

Upvotes: 433

codeMaster
codeMaster

Reputation: 334

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

Upvotes: 0

Andrew
Andrew

Reputation: 43

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>

Upvotes: 1

Ananth
Ananth

Reputation: 1

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

Upvotes: -2

Jakub Muda
Jakub Muda

Reputation: 6694

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>

Upvotes: 2

Jackkobec
Jackkobec

Reputation: 6705

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>

Upvotes: 2

Ermac
Ermac

Reputation: 1250

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

Upvotes: 5

Jacques Koekemoer
Jacques Koekemoer

Reputation: 1415

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

Upvotes: 11

Shadi Alnamrouti
Shadi Alnamrouti

Reputation: 13248

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>

Upvotes: 3

Thiago Cardoso
Thiago Cardoso

Reputation: 542

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

Upvotes: 2

James Parker
James Parker

Reputation: 241

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

Upvotes: 12

Melvin
Melvin

Reputation: 5998

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

Upvotes: 88

obrientimothya
obrientimothya

Reputation: 121

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

Upvotes: 8

Related Questions