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


154

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

Réponses:


330

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>

6
C'est en fait la meilleure approche car elle reporte le souci de présentation à la couche présentation.
LastTribunal

3
Il y a cependant une différence: un data-toggle="tooltip"élément à l'intérieur de l'élément principal (bouton) s'affichera parfaitement à l'extérieur de cet élément, alors qu'il se superposera avec cet élément s'il est défini dans un wrapper span.
Benjamin

1
merci c'est comme ça que cela devrait être fait - Pas de javascript
tsadkan yitbarek

Solution courte, simple et intelligente. L'ajout de la balise Span to Anchor ne change pas la conception dans le bootstrap. C'est donc la solution idéale pour exécuter le modèle et l'info-bulle ensemble.
ankit suthar

cela n'a pas fonctionné pour moi<span data-toggle="modal" data-target="#myModalForm" title="Click to edit row" data-row="0" data-cmid="425" data-id="11788" data-src="1.1.1.1" data-src_desc="null" data-dst="2.2.2.2" data-dst_desc="null" data-protocol="TCP" data-ports="80" data-remarks="none"><a class="btn btn-sm btn-info" data-toggle="tooltip" title="Click to edit row" data-original-title="Click to edit row" data-trigger="hover" href="javascript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></span>
shorif2000

73

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

10
Simplifié cela avec: $ ('[data-tooltip = "tooltip"]'). Tooltip ();
Ryan Currah

3
Utilisé votre réponse mise à jour et était très facile, a parfaitement fonctionné
The One and Only ChemistryBlob

1
mieux que l'emballage belle solution
D3VELOPER

1
Le problème avec ceci (et d'autres solutions dans cette question en ce moment) est que lorsque vous cliquez pour ouvrir le modal, puis le fermez, l'info-bulle réapparaît (ou reste visible) même si la souris a quitté le bouton. C'est très ennuyeux si vous avez par exemple des boutons dans un tableau sur chaque ligne, car ils pourraient bloquer le bouton ci-dessus / ci-dessous. Le seul moyen de le masquer est de cliquer quelque part en dehors de l'info-bulle.
câlin le

1
J'adore cette approche beaucoup plus que la réponse acceptée avec le wrapper. C'est très simple car il étend les capacités HTML5 sans trop surcharger le DOM. De plus, dans mon cas, l'approche wrapper ne semble pas fonctionner
Canelo Digital

11

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

9

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

1
C'est la réponse la plus propre et la moins intrusive
Smyrnian

8

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


Malheureusement, ce numéro (# 7011) a été refusé.
TJ Crowder

3

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>

3

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


Génial. Ajoutez également du HTML.
Web_Developer

2

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

2

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>

2

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>


1

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

entrez la description de l'image ici

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>

entrez la description de l'image ici


0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.