Les info-bulles jQueryUI sont en concurrence avec Twitter Bootstrap

J'ai pu obtenir des astuces pour travailler enfin avec le code suivant:

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

puis

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

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

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

L'interface utilisateur jQuery et Bootstrap utilisent tous deux tooltiple nom du plugin. Utilisez $.widget.bridgepour créer un nom différent pour la version de l'interface utilisateur jQuery et permettre au plugin Bootstrap de rester nommé info-bulle (essayer d'utiliser l' noConflictoption sur le widget Bootstrap entraîne simplement de nombreuses erreurs car cela 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 également le conflit de bouton:

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

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

Cela a fonctionné pour moi:

Si vous avez besoin d'utiliser JQuery-UI mais que vous souhaitez utiliser l'info-bulle de bootstrap, il vous suffit d'obtenir une version personnalisée de JQuery-UI à partir de ce site Web .

Décochez simplement l'option "Info-bulle" et téléchargez-la (ce sera quelque chose comme "jquery-ui-1.10.4.custom.js").

Ajoutez-le simplement à votre projet au lieu de la version que vous utilisez actuellement et vous êtes prêt à faire la fête. Cela évitera le conflit. Cela a fonctionné comme un charme pour moi!

Dans le cas où vous devez charger jquery-ui.jsaprès, bootstrap.jsvoici comment le faire:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

Cela remplacera l'info-bulle de jquery-ui et utilisera toujours des bootstraps.

En supposant que l'interface utilisateur sera appelée après l'initialisation de bootsrap

Stockez la fonction d'amorçage juste avant l'initialisation de l'interface utilisateur

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

Puis appelez-le comme suit

$('.targetClass').bstooltip();

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

Que diriez-vous d'utiliser simplement les popovers 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 ne rendent pas mes boutons JQuery UI dérangés.

J'utilise Jquery UI uniquement pour la saisie semi-automatique / comboboxes personnalisées (je ne peux donc pas prétendre que les autres contrôles JQ-UI sont corrects) et aucun des éléments ci-dessus n'a permis de résoudre le problème CSS sur les boutons de la zone de liste déroulante devenant «non stylisés» lors de l'appel des info-bulles BS. Le passage à BS Popovers a fourni essentiellement le même effet sans conflit, sans réorganisation de mes importations de script et sans instruction de pont explicite nécessaire.

essayez d'utiliser jQuery.noConflict () et voyez si cela vous aide du tout. Il semble que bootstrap et jQuery utilisent le même espace de noms, et peut-être que les info-bulles bootstrap et jQuery sont chargées dans la même fonction, ou l'une est chargée en premier.

Vous pouvez également vérifier quelle bibliothèque est chargée en premier. Habituellement, si vous déclarez la même fonction deux fois en javascript, la seconde est celle qui est utilisée.

Troisièmement, vérifiez le package jQueryUI ( sur leur site Web) et voyez si vous pouvez télécharger une version qui ne contient pas les infobulles (j'ai vérifié et c'est tout à fait faisable).

Il existe une solution simple et bonne, il suffit de réorganiser votre lien de fichier bootstrap et jquery ui comme ceci:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

Chargez simplement jQueryui avant de charger le fichier js boostrap. C'est du travail pour moi.

Un moyen simple consiste à charger bootstrap.js après jquery-ui.js, de sorte que le bootstrap .tooltip remplace l'interface utilisateur de jquery. Si vous utilisez un chargeur de module comme requirejs, vous pouvez rendre bootstrap dépendant de jquery-ui, en tant que tel:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...