Contrôle bootstrap avec plusieurs «basculement de données»

Existe-t-il un moyen d'assigner plus d'un événement à un contrôle d'amorçage via "data-toggle". Par exemple, disons que je veux un bouton auquel une "info-bulle" et une bascule "bouton" lui sont assignées.
J'ai essayé data-toggle = "tooltip button", mais seule l'infobulle fonctionnait.

ÉDITER:

C'est facilement "contournable" avec

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

Si vous souhaitez ajouter un modal et une info-bulle sans ajouter de javascript ou modifier la fonction d'info-bulle, vous pouvez également simplement enrouler un élément autour de celui-ci:

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

Comme l'info-bulle n'est pas initialisée automatiquement, vous pouvez apporter des modifications dans votre initialisation de l'info-bulle. J'ai fait le mien comme ça:

$(document).ready(function() {
    $('body').tooltip({
        selector: "[data-tooltip=tooltip]",
        container: "body"
    });
});

avec ce balisage:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

Remarquez le data-tooltip.

Mettre à jour

Ou simplement,

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

J'ai réussi à résoudre ce problème sans avoir besoin de modifier le balisage avec l'élément suivant de jQuery. J'ai eu un problème similaire où je voulais une info-bulle sur un bouton qui utilisait déjà le basculement de données pour un modal. Tout ce que vous aurez à faire ici est d'ajouter le titre au bouton.

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

C'est la meilleure solution que je viens de mettre en œuvre:

HTML

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

JAVASCRIPT que vous devez de toute façon inclure quelle que soit la méthode que vous utilisez.

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

Pas encore. Cependant, il a été suggéré que quelqu'un ajoute cette fonctionnalité un jour.

Le problème d'amorçage Github suivant montre un exemple parfait de ce que vous souhaitez. C'est possible, mais pas sans écrire votre propre code de contournement à ce stade.

Vérifiez-le... :-)

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

J'utilise href pour charger le modal et laisser basculer les données pour l'info-bulle:

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

Puisque Bootstrap vous oblige à initialiser les info-bulles uniquement via Javascript, j'ai changé data-toggle="tooltip"(puisque c'est inutile alors) class="bootstrap-tooltip"et utilisé ce Javascript pour initialiser mes info-bulles:

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

Et donc j'étais libre d'utiliser l' data-toggleattribut pour autre chose (par exemple data-toggle="button").

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

Dans mon cas, j'ai un bouton qui montre l'info-bulle et il devrait rester désactivé jusqu'à d'autres actions. En utilisant son approche, le modal fonctionne même si le bouton est désactivé, car son appel est en dehors du bouton - je suis dans un fichier lame Laravel, 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>

Donc, si vous souhaitez afficher le modal 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 souhaitez le tester, modifiez l'attribut avec un code JQuery:

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

Encore une solution:

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

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

Une info-bulle 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>

Lorsque vous ouvrez un modal sur une balise et que vous souhaitez afficher une info-bulle et si vous implémentez une info-bulle à l'intérieur d'une balise, l'info-bulle s'affiche à proximité. comme ça

Je suggérerai 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>

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