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

Comme Bootstrap vous oblige à initialiser les infobulles uniquement par le biais de Javascript, j'ai modifié les éléments suivants data-toggle="tooltip" (puisque c'est inutile alors) à class="bootstrap-tooltip" et j'ai utilisé ce Javascript pour initialiser mes tooltips :

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

Et donc j'étais libre d'utiliser le data-toggle pour quelque chose d'autre (par ex. data-toggle="button" ).

Answer 2

J'utilise href pour charger la modale et je laisse data-toggle pour l'infobulle :

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

Answer 3

Juste pour compléter la réponse de @Roman Holzner...

Dans mon cas, j'ai un bouton qui affiche l'info-bulle et qui doit rester désactivé jusqu'à ce que d'autres actions soient effectuées. En utilisant son approche, la modale fonctionne même si le bouton est désactivé, parce que son appel est en dehors du bouton - je suis dans un fichier de lame Laravel, juste pour être clair :)

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

Ainsi, si vous souhaitez afficher la modale uniquement lorsque le bouton est actif, vous devez modifier l'ordre des balises :

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

Si vous voulez le tester, changez l'attribut avec un code JQuery :

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

Answer 4

Une solution de plus :

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

Answer 5

Il existe une solution intéressante utilisant la classe .stretched-link . Le bouton doit avoir une classe .position-relative . Voici un exemple de fonctionnement complet :

L'infobulle doit être ajoutée au bouton, sinon sa position sera incorrecte.

$('[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>