jQueryUI Tooltips sont en concurrence avec Bootstrap Twitter

à la fois jQuery UI et Bootstrap utilisent 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 rester nommé tooltip (en essayant d'utiliser l'option noConflict sur le widget Bootstrap juste entraîner beaucoup d'erreurs parce qu'il ne fonctionne pas correctement; "15197092020" ce problème a été rapporté ici "15198092020"):

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

de Sorte que 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>

code de copier-coller agréable 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 est de charger bootrap.js après jquery-ui.js, alors que le bootstrap .la méthode tooltip a priorité.

cela a fonctionné pour moi:

si vous avez besoin d'utiliser JQuery-UI, mais que vous voulez utiliser tooltip de bootstrap, il vous suffit d'obtenir une version personnalisée de JQuery-UI à partir de ce site .

décochez simplement L'option" Tooltip "et téléchargez-la (ce sera quelque chose comme" jquery-ui-1.10.4.personnaliser.js").

il suffit de l'ajouter à votre projet au lieu de la version que vous utilisez actuellement et, vous êtes prêt à faire la fête. Cela permettra d'éviter le conflit. Ça a fonctionné comme un charme pour moi!

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

stocker la fonction bootstrap juste avant que L'UI est initialisé

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

alors appelez-le comme suit

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

Dans le cas où vous devez charger jquery-ui.js après bootstrap.js voici 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>var jQuery.fn.tooltip = _tooltip;</script>

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

pourquoi ne pas utiliser des popover Bootstrap à la place? Les BS popovers ne créent pas le même conflit bien qu'ils nécessitent le même tooltip.js composant. Oui, ils sont plus stylisés mais ne font pas que les boutons de mon IU JQuery deviennent chelous.

j'utilise jQuery UI uniquement pour personnaliser autocomplete/comboboxes (donc je ne peux pas demander d'autres contrôles JQ-UI sont ok) et aucun de ce qui précède n'a fonctionné pour corriger le problème CSS sur les boutons combobox devenant" unstyled " en invoquant BS Tooltips. Passer à BS Popovers a fourni essentiellement le même effet sans conflits, sans réordonner les importations de mon script, et sans déclarations de pont explicites nécessaires.

essayez d'utiliser jQuery.noConflict() et voir si cela vous aide. On dirait que bootstrap et jQuery utilisent le même espace de noms, et peut-être que les tooltips bootstrap et jQuery sont chargés dans la même fonction, ou qu'on est chargé en premier.

vous pouvez également vérifier pour voir quelle Bibliothèque est chargée en premier. Habituellement, si vous déclarez la même fonction deux fois en javascript le second est celui qui est utilisé.

Troisièmement, vérifiez le paquet jQueryUI ( sur leur site web) et voir si vous pouvez télécharger une version qui n'a pas les infobulles inclus (j'ai vérifié et c'est totalement faisable).

il y a une solution facile et bonne, il suffit de réarranger votre bootstrap et le lien de fichier ui jquery comme ceci:

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

il suffit de charger jQueryui avant de charger le fichier boostrap js. C'est un travail pour moi.

un moyen facile est de charger bootstrap.js après jquery-ui.js, alors que le bootstrap .tooltip l'emporte sur jquery UI. Si vous utilisez un chargeur de modules comme requerjs, alors vous pouvez faire dépendre bootstrap de jquery-ui, en tant que tel:

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