jQueryUI Tooltips се конкурират с Twitter Bootstrap

Както jQuery UI, така и Bootstrap използват tooltip за името на приставката. Използвайте $.widget.bridge, за да създадете различно име за версията на потребителския интерфейс на jQuery и да позволите на плъгина Bootstrap да остане име подсказка (опитът да се използва опцията noConflict в изпълнимия модул Bootstrap просто води до много грешки, защото не работи правилно; този проблем е докладван тук):

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

Така че кодът, за да работи:

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

Добър код за копиране и поставяне, който също обработва конфликта на бутоните:

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

Просто решение е да заредите bootrap.js след jquery-ui.js, така че методът bootstrap .tooltip да има предимство.

В случай, че трябва да заредите jquery-ui.js след bootstrap.js, ето как да го направите:

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

Това ще замени подсказката на jquery-ui и винаги ще използва bootstraps.

Това проработи за мен:

Ако трябва да използвате JQuery-UI, но искате да използвате подсказката на bootstrap, просто вземете персонализирана версия на JQuery-UI от този уебсайт.

Просто премахнете отметката от опцията „Tooltip“ и я изтеглете (ще бъде нещо като „jquery-ui-1.10.4.custom.js“).

Просто го добавете към вашия проект вместо версията, която използвате в момента и сте готови за парти. Това ще избегне конфликта. Подейства ми като чар!

Ако приемем, че потребителският интерфейс ще бъде извикан след инициализиране на bootsrap

Съхранявайте функцията за стартиране точно преди потребителският интерфейс да бъде инициализиран

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

След това го наречете както следва

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

Какво ще кажете просто да използвате Bootstrap popover вместо това? BS popovers не създават същия конфликт, въпреки че изискват същия компонент tooltip.js. Да, те са по-стилизирани, но не карат моите бутони на потребителския интерфейс на JQuery да не работят.

Използвам Jquery UI само за персонализирано автоматично довършване/комбинирани полета (така че не мога да твърдя, че други JQ-UI контроли са ок) и нито едно от горните не работи, за да коригира проблема с CSS на бутоните в комбинирания списък, които стават „нестилизирани“ при извикване на BS Tooltips. Преминаването към BS Popovers осигури по същество същия ефект без конфликти, без пренареждане на импортирания от моите скриптове и без нужда от изрични мостови изрази.

Това решение изглежда работи добре за мен.

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

опитайте да използвате jQuery.noConflict() и вижте дали това изобщо ще ви помогне. Изглежда, че bootstrap и jQuery използват едно и също пространство от имена и може би подсказките за bootstrap и jQuery се зареждат в една и съща функция или едно се зарежда първо.

Можете също така да проверите коя библиотека е заредена първа. Обикновено, ако декларирате една и съща функция два пъти в javascript, втората е тази, която се използва.

Трето, проверете пакета jQueryUI (на техния уебсайт) и вижте дали можете да изтеглите версия, която няма включени подсказки (проверих и това е напълно изпълнимо).

Има лесно и добро решение, просто пренаредете връзката на вашия bootstrap и jquery ui файл така:

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

Просто заредете jQueryui, преди да заредите boostrap js файл. Това е работа за мен.

Лесен начин е да заредите bootstrap.js след jquery-ui.js, така че bootstrap .tooltip да замени потребителския интерфейс на jquery. Ако използвате програма за зареждане на модули като requirejs, можете да направите bootstrap зависим от jquery-ui, като такъв:

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

Другият начин е да изтеглите персонализирана компилация на jquery UI.

Изключете това, което не е необходимо, в този случай подсказка.

Можете да го изтеглите от тук https://jqueryui.com/download/

По този начин можете да го включите навсякъде