jQueryUI Tooltips bersaing dengan Bootstrap Twitter

Saya telah berhasil mendapatkan beberapa tip alat untuk bekerja pada akhirnya dengan kode berikut:

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

lalu

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

Masalah yang saya temui adalah ia menggunakan tooltips jQueryUI (tanpa panah, tooltips yang jelek), bukan Bootstraps.

Apa yang harus saya lakukan untuk menggunakan Bootstrap Tooltips alih-alih jQueryUI?

UI jQuery dan Bootstrap digunakan tooltipuntuk nama plugin. Gunakan $.widget.bridgeuntuk membuat nama lain untuk versi jQuery UI dan memungkinkan plugin Bootstrap tetap bernama tooltip (mencoba menggunakan noConflictopsi pada widget Bootstrap hanya menghasilkan banyak kesalahan karena tidak berfungsi dengan baik; masalah itu telah dilaporkan di sini ):

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

Jadi kode untuk membuatnya bekerja:

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

Bagus salin kode tempel yang juga menangani konflik tombol:

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

Solusi sederhana adalah memuat bootrap.js setelah jquery-ui.js, sehingga metode bootstrap .tooltip diutamakan.

Ini bekerja untuk saya:

Jika Anda perlu menggunakan JQuery-UI tetapi Anda ingin menggunakan tooltip bootstrap, cukup dapatkan versi khusus JQuery-UI dari situs web ini .

Hapus centang opsi "Tooltip", dan unduh (itu akan menjadi sesuatu seperti "jquery-ui-1.10.4.custom.js").

Cukup tambahkan ke proyek Anda alih-alih versi yang Anda gunakan sekarang dan, Anda siap berpesta. Ini akan menghindari konflik. Itu bekerja seperti pesona bagiku!

Jika Anda harus memuat jquery-ui.jssetelah di bootstrap.jssini adalah bagaimana melakukannya:

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

Ini akan menimpa tooltip jquery-ui dan selalu menggunakan bootstraps.

Dengan asumsi bahwa UI akan dipanggil setelah bootsrap diinisialisasi

Simpan fungsi bootstrap tepat sebelum UI diinisialisasi

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

Kemudian sebut sebagai berikut

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

Solusi ini sepertinya bekerja dengan baik untuk saya.

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

Bagaimana kalau hanya menggunakan popover Bootstrap saja? BS popovers tidak menciptakan konflik yang sama walaupun mereka memerlukan komponen tooltip.js yang sama. Ya, mereka lebih bergaya tetapi tidak menyebabkan tombol JQuery UI saya menjadi miring.

Saya menggunakan Jquery UI hanya untuk autocomplete / comboboxes kustom (jadi tidak bisa mengklaim kontrol JQ-UI lainnya ok) dan tidak ada yang di atas bekerja untuk memperbaiki masalah CSS pada tombol combobox menjadi "unstyled" ketika menggunakan BS Tooltips. Beralih ke BS Popovers pada dasarnya memberikan efek yang sama tanpa konflik, tanpa pemesanan ulang impor skrip saya, dan tidak diperlukan pernyataan jembatan yang eksplisit.

coba gunakan jQuery.noConflict () dan lihat apakah itu membantu Anda sama sekali. Sepertinya bootstrap dan jQuery menggunakan namespace yang sama, dan mungkin tooltips bootstrap dan jQuery dimuat ke dalam fungsi yang sama, atau yang dimuat terlebih dahulu.

Anda juga dapat memeriksa untuk melihat perpustakaan mana yang dimuat terlebih dahulu. Biasanya jika Anda mendeklarasikan fungsi yang sama dua kali dalam javascript, yang kedua adalah yang digunakan.

Ketiga, periksa paket jQueryUI ( di situs web mereka) dan lihat apakah Anda dapat mengunduh versi yang tidak menyertakan tooltips (saya memeriksa dan ini benar-benar dapat dilakukan).

Ada solusi yang mudah dan bagus, atur ulang tautan file bootstrap dan jquery ui Anda seperti ini:

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

Hanya memuat jQueryui sebelum memuat file js boostrap. Ini bekerja untuk saya.

Cara mudah adalah memuat bootstrap.js setelah jquery-ui.js, sehingga bootstrap .tooltip menimpa UI jquery. Jika Anda menggunakan pemuat modul seperti requireejs, maka Anda bisa membuat bootstrap bergantung pada jquery-ui, seperti:

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