jQueryUI Tooltips konkuruje z Twitter Bootstrap

Udało mi się uzyskać kilka wskazówek dotyczących narzędzi, aby w końcu pracować z następującym kodem:

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

i wtedy

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

Problem polega na tym, że używa on podpowiedzi jQueryUI (bez strzałek, duże brzydkie podpowiedzi) zamiast Bootstrapów.

Co muszę zrobić, aby korzystać z etykiet narzędzi Bootstrap zamiast jQueryUI?

Zarówno interfejs użytkownika jQuery, jak i Bootstrap używają tooltipnazwy wtyczki. Służy $.widget.bridgedo tworzenia innej nazwy dla wersji interfejsu użytkownika jQuery i zezwalania wtyczce Bootstrap na pozostanie nazwaną etykietką narzędzia (próba użycia noConflictopcji w widgecie Bootstrap powoduje tylko wiele błędów, ponieważ nie działa ona poprawnie; ten problem został zgłoszony tutaj ):

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

Więc kod, aby to zadziałało:

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

Ładny kod kopiuj wklej, który obsługuje również konflikt przycisków:

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

Prostym rozwiązaniem jest załadowanie bootrap.js po jquery-ui.js, tak aby metoda bootstrap .tooltip miała pierwszeństwo.

To zadziałało dla mnie:

Jeśli potrzebujesz użyć JQuery-UI, ale chcesz użyć podpowiedzi bootstrap, po prostu pobierz dostosowaną wersję JQuery-UI z tej strony .

Po prostu odznacz opcję „Podpowiedź” i pobierz ją (będzie to coś w rodzaju „jquery-ui-1.10.4.custom.js”).

Po prostu dodaj go do swojego projektu zamiast wersji, z której obecnie korzystasz i jesteś gotowy do zabawy. Pozwoli to uniknąć konfliktu. Dla mnie zadziałało jak urok!

Jeśli musisz załadować jquery-ui.jspóźniej, bootstrap.jsoto jak to zrobić:

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

Spowoduje to przesłonięcie podpowiedzi jquery-ui i zawsze używanie bootstrapów.

Zakładając, że interfejs użytkownika zostanie wywołany po zainicjowaniu funkcji bootrap

Przechowuj funkcję ładowania początkowego tuż przed zainicjowaniem interfejsu użytkownika

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

Następnie nazwij to następująco

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

Wydaje mi się, że to rozwiązanie działa dobrze.

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

Co powiesz na użycie zamiast tego okienek wyskakujących Bootstrap? Wyskakujące okienka BS nie powodują tego samego konfliktu, chociaż wymagają tego samego komponentu tooltip.js. Tak, są bardziej stylizowane, ale nie powodują, że przyciski interfejsu JQuery stają się niewyraźne.

Używam interfejsu JQuery tylko do niestandardowego autouzupełniania / komboboksów (więc nie mogę twierdzić, że inne kontrolki JQ-UI są w porządku) i żadna z powyższych nie rozwiązała problemu CSS na przyciskach combobox, które stały się „niestylowane” podczas wywoływania podpowiedzi BS. Przejście na BS Popovers zapewniło zasadniczo ten sam efekt, bez konfliktów, bez zmiany kolejności importowanych przeze mnie skryptów i bez wyraźnych instrukcji pomostowych.

spróbuj użyć jQuery.noConflict () i zobacz, czy to w ogóle Ci pomoże. Wygląda na to, że bootstrap i jQuery używają tej samej przestrzeni nazw i być może podpowiedzi bootstrap i jQuery są ładowane do tej samej funkcji lub jedna jest ładowana jako pierwsza.

Możesz również sprawdzić, która biblioteka jest ładowana jako pierwsza. Zwykle, jeśli deklarujesz tę samą funkcję dwukrotnie w javascript, druga jest tą, która jest używana.

Po trzecie, sprawdź pakiet jQueryUI ( na ich stronie internetowej) i zobacz, czy możesz pobrać wersję, która nie ma dołączonych podpowiedzi (sprawdziłem i jest to całkowicie wykonalne).

Jest łatwe i dobre rozwiązanie, po prostu przestaw swój bootstrap i link do pliku interfejsu jquery w następujący sposób:

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

Po prostu załaduj jQueryui przed załadowaniem pliku boostrap js. To dla mnie praca.

Prostym sposobem jest załadowanie bootstrap.js po jquery-ui.js, tak aby bootstrap .tooltip przesłaniał interfejs jquery. Jeśli używasz modułu ładującego, takiego jak requirejs, możesz uzależnić bootstrap od jquery-ui, na przykład:

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