Подсказки jQueryUI конкурируют с 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 и всегда будет использовать бутстрапы.

Это сработало для меня:

Если вам нужно использовать JQuery-UI, но вы хотите использовать всплывающую подсказку начальной загрузки, просто скачайте настроенную версию JQuery-UI с этого веб-сайта.

Просто снимите флажок «Подсказка» и загрузите ее (это будет что-то вроде «jquery-ui-1.10.4.custom.js»).

Просто добавьте его в свой проект вместо версии, которую вы сейчас используете, и вы готовы к вечеринке. Это позволит избежать конфликта. Это сработало как шарм для меня!

Предполагая, что пользовательский интерфейс будет вызываться после инициализации начальной загрузки

Сохраните функцию начальной загрузки непосредственно перед инициализацией пользовательского интерфейса.

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

Затем назовите это следующим образом

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

Как насчет того, чтобы вместо этого просто использовать всплывающие окна Bootstrap? Всплывающие окна BS не создают такого же конфликта, хотя для них требуется один и тот же компонент tooltip.js. Да, они более стилизованы, но кнопки моего пользовательского интерфейса JQuery не шатаются.

Я использую пользовательский интерфейс Jquery только для пользовательских автозаполнения/полей со списком (поэтому я не могу утверждать, что другие элементы управления JQ-UI в порядке), и ни один из вышеперечисленных способов не помог устранить проблему CSS, когда кнопки со списком становились «нестилизованными» при вызове BS Tooltips. Переключение на всплывающие окна BS дало по существу тот же эффект без конфликтов, без переупорядочения импорта моих скриптов и без необходимости явных операторов моста.

Это решение кажется мне хорошо работающим.

// 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, вы можете сделать начальную загрузку зависимой от jquery-ui, как таковой:

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

Другой способ — загрузить пользовательскую сборку пользовательского интерфейса jquery.

Исключите то, что не нужно, в данном случае всплывающую подсказку.

Скачать можно отсюда https://jqueryui.com/download/

Таким образом, вы можете включить его в любом месте