web-dev-qa-db-fra.com

Bootstrap contrôle avec plusieurs "données-bascule"

Existe-t-il un moyen d'attribuer plusieurs événements à un contrôle bootstrap via "data-toggle". Par exemple, disons que je veux un bouton qui a une "info-bulle" et une bascule "bouton" qui lui est assignée.
Essayé data-toggle = "bouton d'info-bulle", mais seule l'info-bulle a fonctionné.

MODIFIER:

Ceci est facilement "contournable" avec

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
buttontwitter-bootstrapbinding
136
LastTribunal

Si vous souhaitez ajouter un modal et une info-bulle sans ajouter de javascript ni modifier la fonction info-bulle, vous pouvez aussi simplement envelopper un élément:

<span data-toggle="modal" data-target="#id">
    <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
</span>
285
Roman Holzner

Etant donné que l'info-bulle n'est pas initialisée automatiquement, vous pouvez modifier votre initialisation. 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>

Notez le data-tooltip.

Mise à jour

Ou simplement,

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

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

Le numéro suivant bootstrap Github illustre parfaitement ce que vous souhaitez. C'est possible - mais pas sans écrire votre propre code de solution de contournement à ce stade cependant.

Vérifiez-le... :-)

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

8
obrientimothya

C'est la meilleure solution que je viens d'implémenter:

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 utilisée. 

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

J'ai réussi à résoudre ce problème sans avoir besoin de changer de balisage avec le morceau suivant de jQuery. J'ai eu un problème similaire où je voulais une info-bulle sur un bouton qui utilisait déjà data-toggle pour un modal. Tout ce que vous devez faire ici est d’ajouter le titre au bouton.

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

J'utilise href pour charger le modal et laisser data-toggle pour l'info-bulle:

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

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

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

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

3
ankabout

Une autre solution:

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

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

L'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>
2
Jakub Muda

Juste pour complément @Roman Holzner répondre ...

Dans mon cas, j'ai un bouton qui affiche l'info-bulle et il devrait rester désactivé jusqu'à ce que les 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, 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>

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 voulez le tester, changez l'attribut avec un code JQuery:

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

Lorsque vous ouvrez modal sur une balise et que vous souhaitez afficher une info-bulle, si vous implémentez une info-bulle dans une balise, celle-ci affiche une info-bulle à proximité. comme ça

enter image description here

Je vais suggérer que l'utilisation de 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>

enter image description here

1
virender