Les infobulles de jQueryUI sont en concurrence avec Twitter Bootstrap

Question

J'ai réussi à faire fonctionner certains conseils d'outils. enfin avec le code suivant :

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

et ensuite

<script>
    $('[rel=tooltip]').tooltip();
</script>

Le problème que je rencontre est qu'il utilise les infobulles de jQueryUI (pas de flèches, de grosses infobulles laides) au lieu de Bootstraps.

Que dois-je faire pour utiliser les infobulles de Bootstrap au lieu de jQueryUI ?

Answer 1

JQuery UI et Bootstrap utilisent tous deux tooltip pour le nom du plugin. Utilisez $.widget.bridge pour créer un nom différent pour la version jQuery UI et permettre au plugin Bootstrap de conserver le nom tooltip (en essayant d'utiliser la balise noConflict sur le widget Bootstrap entraîne de nombreuses erreurs car il ne fonctionne pas correctement ; ce problème a été signalé ici ):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

Donc le code pour le faire fonctionner :

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

Beau code copier-coller qui gère aussi le conflit de boutons :

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

Answer 2

Une solution simple consiste à charger bootrap.js après jquery-ui.js, afin que la méthode bootstrap .tooltip soit prioritaire.

Answer 3

Cela a marché pour moi :

Si vous avez besoin d'utiliser JQuery-UI mais que vous souhaitez utiliser l'infobulle de Bootstrap, il vous suffit d'obtenir une version personnalisée de JQuery-UI à partir de ce qui suit site web .

Il suffit de décocher l'option "Tooltip", et de le télécharger (ce sera quelque chose comme "jquery-ui-1.10.4.custom.js").

Il suffit de l'ajouter à votre projet à la place de la version que vous utilisez actuellement et vous êtes prêt à faire la fête. Cela évitera le conflit. Cela a marché comme un charme pour moi !

Answer 4

Pourquoi ne pas utiliser les popovers de Bootstrap à la place ? Les popovers BS ne créent pas le même conflit bien qu'ils nécessitent le même composant tooltip.js. Oui, ils sont plus stylisés, mais ils ne rendent pas mes boutons JQuery UI inutilisables.

J'utilise Jquery UI uniquement pour les boîtes à coques/combinaisons personnalisées (je ne peux donc pas prétendre que les autres contrôles JQ-UI sont corrects) et aucune des solutions ci-dessus n'a fonctionné pour résoudre le problème CSS des boutons de la boîte à coques qui deviennent "non stylisés" lorsqu'on invoque BS Tooltips. Le passage à BS Popovers a fourni essentiellement le même effet sans conflits, sans réordonner mes importations script, et sans avoir besoin de déclarations de pont explicites.

Answer 5

Cette solution semble bien fonctionner pour moi.

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);