Le descrizioni comandi di jQueryUI sono in competizione con Twitter Bootstrap

Sono stato in grado di ottenere alcuni suggerimenti 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 in cui mi imbatto è che sta usando i tooltip jQueryUI (senza frecce, tooltip grandi e brutti) invece di Bootstraps.

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

Sia l'interfaccia utente jQuery che Bootstrap utilizzano tooltipil nome del plug-in. Utilizzare $.widget.bridgeper creare un nome diverso per la versione dell'interfaccia utente di jQuery e consentire al plug-in Bootstrap di rimanere denominato tooltip (il tentativo di utilizzare l' noConflictopzione sul widget Bootstrap provoca solo molti errori perché non funziona correttamente; tale 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
<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>

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

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

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 comandi di bootstrap, è sufficiente ottenere una versione personalizzata dell'interfaccia utente di JQuery da questo sito Web .

Deseleziona semplicemente l'opzione "Descrizione comando" e scaricala (sarà qualcosa come "jquery-ui-1.10.4.custom.js").

Aggiungilo semplicemente al tuo progetto anziché alla versione che stai attualmente utilizzando e sei pronto per festeggiare. Questo eviterà il conflitto. Ha funzionato come un incantesimo per me!

Nel caso in cui è necessario caricare jquery-ui.jsdopo bootstrap.jsqui è come farlo:

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

Ciò sovrascriverà la descrizione di jquery-ui e utilizzerà sempre i bootstrap.

Supponendo che l'interfaccia utente verrà chiamata dopo aver inizializzato il bootstrap

Archivia la funzione bootstrap subito prima dell'inizializzazione dell'interfaccia utente

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

Che ne dici di usare invece i popover Bootstrap invece? I popover BS non creano lo stesso conflitto sebbene richiedano lo stesso componente tooltip.js. Sì, sono più stilizzati ma non rendono i miei pulsanti dell'interfaccia utente di JQuery instabili.

Sto usando l'interfaccia utente di Jquery solo per il completamento automatico / caselle combinate personalizzate (quindi non posso affermare che altri controlli JQ-UI sono ok) e nessuna delle precedenti ha funzionato per risolvere il problema CSS sui pulsanti della casella combinata diventando "non stilato" quando si richiama BS Tooltips. Passare a BS Popovers ha essenzialmente fornito lo stesso effetto senza conflitti, senza riordinare le mie importazioni di script e non sono necessarie dichiarazioni esplicite sul bridge.

prova a usare jQuery.noConflict () e vedi se questo ti aiuta affatto. Sembra che bootstrap e jQuery stiano usando 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 si dichiara la stessa funzione due volte in JavaScript, la seconda è quella utilizzata.

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

C'è una soluzione facile e buona, basta riorganizzare il tuo bootstrap e il tuo link al file dell'interfaccia utente in questo modo:

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

Basta caricare jQueryui prima di caricare il file jostra boostrap. Per me è un lavoro.

Un modo semplice è caricare bootstrap.js dopo jquery-ui.js, in modo che bootstrap .tooltip sovrascriva l'interfaccia utente di jquery. Se stai usando un caricatore di moduli come requestjs, allora potresti fare in modo che bootstrap dipenda da jquery-ui, come tale:

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