Bootstrap de contrôle avec plusieurs “data-toggle”

Est-il un moyen d'affecter plus d'un événement à un bootstrap de contrôle via "data-toggle".
Par exemple, disons que je veux un bouton qui a une "info-bulle" et un "bouton" basculer attribué
à elle.

Essayé data-toggle="info-bulle du bouton", mais seulement l'info-bulle travaillé.

EDIT:

C'est facilement "workaroundable" avec

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

InformationsquelleAutor LastTribunal | 2013-05-06

279

Si vous souhaitez ajouter un modal et une info-bulle sans ajout de javascript ou de modifier l'info-bulle de la fonction, vous pouvez aussi tout simplement envelopper un élément autour d'elle:
```
<span data-toggle="modal" data-target="#id">
    <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
</span>
```
- C'est effectivement la meilleure approche, car elle renvoie à la préoccupation de la présentation à la couche de présentation.
- Il y a une certaine différence: un data-toggle="tooltip" à l'intérieur de la main (bouton) élément montrera parfaitement en dehors de cet élément, alors qu'il chevauche cet élément si elle est définie à l'intérieur d'une durée de wrapper.
- merci c'est comment il devrait être fait - Pas de javascript
- Court, Simple et élégante Solution. Ajout de la Durée balise d'Ancrage ne modifie pas la conception dans le bootstrap c'est Donc la Solution Parfaite pour la course modèle et l'info-bulle ensemble.
- 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>
- fonctionne comme un charme 😉
- Génial! Merci!
- Cette approche rompt btn-groups (même avec <button> au lieu de <a> intérieure de l'élément)
- Merci pour cette réponse et <span> trop.
InformationsquelleAutor Roman Holzner
63

Depuis info-bulle n'est pas initialisé automatiquement, vous pouvez faire des changements dans votre initialisation de l'info-bulle. J'ai fait le mien comme ceci:
```
$(document).ready(function() {
    $('body').tooltip({
        selector: "[data-tooltip=tooltip]",
        container: "body"
    });
});
```
avec cette balise:
```
<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>
```
Avis de la data-tooltip.

Mise à jour

Ou tout simplement,
```
$('[data-tooltip="tooltip"]').tooltip();
```
- Simplifiées, avec: $('[data-tooltip="tooltip"]').tooltip();
- Utilisé mise à Jour de votre réponse et a été très facile, a parfaitement fonctionné
- nice!! tks en 2016
- mieux que l'enchaînement solution sympa
- Le problème avec cela (et d'autres solutions à cette question pour le moment), c'est que lorsque vous cliquez sur pour ouvrir le modal, et le fermer, l'info-bulle s'affiche à nouveau (ou visible), même si la souris a gauche du bouton. C'est très ennuyeux, par exemple si vous avez des boutons dans un tableau sur chaque ligne, car ils peuvent bloquer le bouton ci-dessus/ci-dessous. Seul moyen de se cacher, c'est de cliquer quelque part à l'extérieur de l'info-bulle.
- Vous souhaiterez peut-être utiliser la première JS partie comme cela enregistre les info-bulles sur ready() événement. Sans elle, l'info-bulle sera enregistré chaque fois que le fichier JavaScript est chargé. Ou de combiner les deux @RyanCurrah le code de l'intérieur ready() événement.
- J'aime cette approche beaucoup plus de la accepté de répondre avec l'enveloppe. C'est très simple puisqu'il s'étend sur le HTML5 capacités sans surcharger les DOM trop. Aussi dans mon cas, le wrapper approche n'a pas l'air de fonctionner
InformationsquelleAutor Melvin
7

Pas encore. Toutefois, il a été suggéré que quelqu'un d'ajouter cette fonctionnalité un jour.

La suite de bootstrap Github question montre un exemple parfait de ce que vous êtes désireux pour. Il est possible - mais pas sans écrire votre propre code solution de contournement à ce stade, cependant.

Check it out... 🙂

https://github.com/twitter/bootstrap/issues/7011
- Malheureusement, ce problème (#7011) a été refusé.
InformationsquelleAutor obrientimothya
6

J'ai réussi à résoudre ce problème sans avoir besoin de modifier le balisage avec le morceau suivant de jQuery. J'ai eu un problème similaire où je voulais une info-bulle sur un bouton qui était déjà à l'aide de données de la bascule pour un modal. Tout ce que vous devez faire ici est d'ajouter le titre à la bouton.
```
$('[data-toggle="modal"][title]').tooltip();
```
InformationsquelleAutor James Parker
6

C'est la meilleure solution que j'ai juste mis en œuvre:

HTML
```
<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>
```
JAVASCRIPT que vous de toute façon besoin d'inclure quelle que soit la méthode que vous utilisez.
```
$('[]').tooltip(); 
```
InformationsquelleAutor Jacques Koekemoer

J'utilise href charger le modal et de données sur les congés-bascule pour l'info-bulle:

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

InformationsquelleAutor Shadi Namrouti

2

Depuis Bootstrap vous oblige à initialiser les info-bulles uniquement à l'aide de Javascript, j'ai changé data-toggle="tooltip" (puisque c'est inutile d' class="bootstrap-tooltip" et utilisé ce Javascript pour initialiser mon info-bulles:
```
$('.bootstrap-tooltip').tooltip();
```
Et j'étais donc libre d'utiliser le data-toggle attribut pour quelque chose d'autre (par exemple,data-toggle="button").
- Grand. Ajouter du code HTML de trop.
InformationsquelleAutor ankabout

Juste pour compléter @Romain Holzner réponse...

Dans mon cas, j'ai un bouton qui affiche l'info-bulle et il doit rester désactivé jusqu'à ce que de plus les actions. À l'aide de son approche, le modal fonctionne même si le bouton est désactivé, car son appel est à l'extérieur du bouton - je suis dans un Laravel lame de fichier, 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 devriez changer l'ordre des tags:

<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, modifier l'attribut avec JQuery code:

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

InformationsquelleAutor Thiago Cardoso

La solution:

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

InformationsquelleAutor Jackkobec

0

Lors de l'ouverture d'modale sur une étiquette et souhaitez afficher les info-bulle et si vous mettez en œuvre info-bulle à l'intérieur de la balise, il va afficher les info-bulle à proximité de la balise. comme ce

Je suggère que l'utilisation de div en dehors d'une balise et l'utilisation "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>
```
InformationsquelleAutor virender

Vous devez vous connecter pour publier un commentaire.

Mise à jour