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

Я был в состоянии получить некоторые подсказки , чтобы работать , наконец , с помощью следующего кода:

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

а потом

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

Проблема, с которой я сталкиваюсь, заключается в том, что он использует всплывающие подсказки jQueryUI (без стрелок, большие уродливые всплывающие подсказки) вместо Bootstraps.

Что мне нужно сделать, чтобы использовать всплывающие подсказки Bootstrap вместо jQueryUI?

И 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, но вы хотите использовать всплывающую подсказку начальной загрузки, просто получите настроенную версию JQuery-UI с этого веб-сайта .

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

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

Если вы должны загрузить 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 и всегда будет использовать загрузочные файлы.

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

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

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

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

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

Мне кажется, это решение хорошо работает.

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

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

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

попробуйте использовать 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' ]
        },...