I suggerimenti di jQueryUI sono in competizione con Twitter Bootstrap

Sono stato in grado di ottenere alcuni suggerimenti sugli strumenti per lavorare finalmente con il seguente codice:

Hover over me 

e poi

  $('[rel=tooltip]').tooltip();  

Il problema che sto incontrando è che sta usando i tooltips di jQueryUI (niente frecce, grandi brutti tooltip) invece di Bootstraps.

Cosa devo fare per utilizzare le descrizioni di Bootstrap invece di jQueryUI?

Sia jQuery UI che Bootstrap usano tooltip per il nome del plugin. Utilizzare $.widget.bridge per creare un nome diverso per la versione dell’interfaccia utente jQuery e consentire al plug-in Bootstrap di rimanere nominato tooltip (provare a utilizzare l’opzione noConflict nel widget Bootstrap comporta solo un sacco di errori perché non funziona correttamente; quel problema è stato segnalato qui ):

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

Quindi il codice per farlo funzionare:

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

Bel codice copia incolla che gestisce anche il conflitto dei pulsanti:

     

Una soluzione semplice è caricare bootrap.js dopo jquery-ui.js, in modo che il metodo bootstrap .tooltip abbia la precedenza.

Questo ha funzionato per me:

Se è necessario utilizzare l’interfaccia utente di JQuery ma si desidera utilizzare la descrizione comando di bootstrap, è sufficiente ottenere una versione personalizzata di JQuery-UI da questo sito Web .

Basta deselezionare l’opzione “Tooltip” e scaricarla (sarà qualcosa come “jquery-ui-1.10.4.custom.js”).

Semplicemente aggiungilo al tuo progetto invece della versione che stai attualmente usando e sei pronto per fare festa. Ciò eviterà il conflitto. Ha funzionato come un incantesimo per me!

Supponendo che l’interfaccia utente chiamerà dopo l’inizializzazione di bootrap

Memorizza la funzione bootstrap appena prima che l’interfaccia utente venga inizializzata

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

Quindi chiamalo come segue

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

Nel caso in cui tu debba caricare jquery-ui.js dopo bootstrap.js ecco come farlo:

      

Questa soluzione sembra funzionare bene per me.

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

Che ne dici di usare solo i popover Bootstrap? I popover BS non creano lo stesso conflitto anche se richiedono lo stesso componente tooltip.js. Sì, sono più stilizzati ma non fanno sì che i miei pulsanti dell’interfaccia utente di JQuery diventino instabili.

Sto usando l’interfaccia utente di Jquery solo per autocomplete / combobox personalizzate (quindi non posso rivendicare altri controlli JQ-UI sono ok) e nessuno dei precedenti ha funzionato per risolvere il problema CSS sui pulsanti della combo diventando “unstyled” durante l’invocazione di BS Tooltips. Passare a BS Popovers ha fornito essenzialmente lo stesso effetto senza conflitti, non importa il riordino del mio script e non sono necessarie istruzioni esplicite sul bridge.

prova ad usare jQuery.noConflict () e vedi se questo ti aiuta affatto. Sembra bootstrap e jQuery usa lo stesso spazio dei nomi, e forse i toolstrap bootstrap e jQuery vengono caricati nella stessa funzione, o uno viene caricato per primo.

Puoi anche controllare per vedere quale libreria è stata caricata per prima. Di solito se dichiari la stessa funzione due volte in javascript, la seconda è quella che viene utilizzata.

In terzo luogo, controlla il pacchetto jQueryUI ( sul loro sito web) e vedi se riesci a scaricare una versione che non ha i tooltip inclusi (ho controllato e questo è totalmente fattibile).

C’è una soluzione facile e buona, basta riorganizzare il tuo file bootstrap e il link del file ui jquery in questo modo:

    

Basta caricare jQueryui prima di caricare il file jostra di boostrap. È lavoro per me.

Un modo semplice è caricare bootstrap.js dopo jquery-ui.js, in modo che bootstrap .tooltip sovrascriva le interfacce utente di jquery. Se stai usando un caricatore di moduli come requirejs, potresti rendere bootstrap dipendente da jquery-ui, in quanto tale:

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