web-dev-qa-db-fra.com

Les infobulles jQueryUI sont en concurrence avec Twitter Bootstrap

J'ai pu obtenir quelques 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 moches) au lieu de Bootstraps.

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

jquery-uitwitter-bootstrap
130
markdotnet

JQuery UI et Bootstrap utilise tooltip pour le nom du plug-in. Utilisez $.widget.bridge pour créer un nom différent pour la version de jQuery UI et permettre au plug-in Bootstrap de rester nommé info-bulle) (essayer d'utiliser l'option noConflict sur le Bootstrap entraîne beaucoup d’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 également 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>
178
The Demz

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

65
Stefan Musarra

Cela a fonctionné pour moi:

Si vous devez utiliser JQuery-UI mais que vous souhaitez utiliser l'info-bulle de bootstrap, procurez-vous simplement une version personnalisée de JQuery-UI à partir de ce site web .

Désactivez 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!

25
Poncho

Si vous devez charger jquery-ui.js après bootstrap.js Voici comment 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 les bootstraps.

21
supersan

En supposant que l'interface utilisateur sera appelée après l'initialisation du bootstrap

Stocker la fonction bootstrap juste avant l’initialisation de l’UI)

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

Puis appelez-le comme suit

$('.targetClass').bstooltip();
13
Projesh Pal

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);
9
Jon Stevens

Pourquoi ne pas utiliser simplement Bootstrap popovers à 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 causent pas les boutons de l'interface utilisateur JQuery aller waché.

J'utilise l'interface utilisateur de Jquery uniquement pour les listes déroulantes à complétion automatique/personnalisées (vous ne pouvez donc pas prétendre que les autres contrôles JQ-UI sont corrects) et aucune des solutions ci-dessus n'a permis de résoudre le problème de la CSS sur les boutons de liste déroulante devenant "sans style" lorsque vous appelez BS Tooltips. Passer à BS Popovers produisait essentiellement le même effet, sans conflit, sans réordonnancement des importations de script et sans instruction de pont explicite.

6
AgonyOfVictory

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

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

4
Sanjib Debnath

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 s’ils sont chargés en premier.

Vous pouvez également vérifier quelle bibliothèque est chargée en premier. Habituellement, si vous déclarez deux fois la même fonction 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 ne contenant pas les infobulles (j'ai vérifié et c'est tout à fait faisable).

3
Matt

Une méthode simple consiste à charger bootstrap.js après jquery-ui.js, de sorte que le bootstrap .tooltip remplace la JQUI UI. Si vous utilisez un chargeur de modules comme requirejs, vous pourriez bootstrap dépend de jquery-ui, en tant que tel:

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