Contrôle Bootstrap avec plusieurs "data-toggle".

Question

Existe-t-il un moyen d'assigner plus d'un événement à un contrôle bootstrap via "data-toggle". Par exemple, disons que je veux un bouton auquel sont attribués un "tooltip" et un "button" toggle. qui lui sont attribués.
J'ai essayé data-toggle="tooltip button", mais seule l'infobulle fonctionnait.

EDIT :

Il est possible de contourner ce problème en utilisant la méthode suivante

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

Answer 1

Lorsque vous ouvrez une modale sur une balise et que vous souhaitez afficher une info-bulle, si vous implémentez l'info-bulle à l'intérieur de la balise, elle s'affichera à proximité de la balise.

Je vais suggérer d'utiliser div en dehors d'une balise et d'utiliser "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 2

J'ai également essayé d'utiliser

<span></span>

mais

<a></a> 

a bien fonctionné pour moi.

Vous êtes ici :

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

Mieux encore, essayez d'envelopper l'ensemble du bouton (qui utilise le popover) avec un 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>

Answer 3

HTML (ejs dianmic page web) : c'est une liste de tableau de tous les utilisateurs et de nodejs générer le tableau. NodeJS fournit une dynamique "<%= user.id %>". Il suffit de changer pour une valeur quelconque comme "54".

<span type="button" data-href='http://stackoverflow.com/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'));
        });
    });

Answer 4

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