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

Si vous voulez ajouter un modale et une infobulle sans ajouter de javascript ni modifier la fonction d'infobulle, vous pouvez aussi simplement envelopper un élément autour de celle-ci :

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

Answer 2

Comme l'infobulle n'est pas initialisée automatiquement, vous pouvez apporter des modifications dans votre initialisation de l'infobulle. J'ai fait la mienne comme ceci :

$(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 .

Mise à jour

Ou simplement,

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Le numéro Github de bootstrap suivant montre un exemple parfait de ce que vous souhaitez. C'est possible, mais pas sans écrire votre propre code de contournement à ce stade.

Regardez ça... :-)

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