jquery-ui I suggerimenti di jQueryUI sono in competizione con Twitter Bootstrap



5 Answers

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

jquery-ui twitter-bootstrap

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

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

e poi

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

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?




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



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



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 ( website e vedi se riesci a scaricare una versione che non ha i tooltip inclusi (ho controllato e questo è totalmente fattibile).




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' ]
        },...



Related