Підказки jQueryUI змагаються з Twitter Bootstrap

Мені вдалося отримати кілька підказок щодо інструментів, щоб нарешті працювати з наступним кодом:

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

і потім

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

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

Що мені потрібно зробити, щоб скористатися підказками Bootstrap Tooltips замість jQueryUI?

І JQuery UI, і Bootstrap використовують tooltipдля імені плагіна. Використовуйте $.widget.bridgeдля створення іншої назви для версії інтерфейсу jQuery UI та дозвольте плагіну 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, але ви хочете скористатися підказкою bootstrap, просто отримайте налаштовану версію 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 та завжди використовувати завантажувальні програми.

Якщо припустити, що інтерфейс буде викликаний після ініціалізації завантаження

Зберігайте функцію завантаження безпосередньо перед ініціалізацією інтерфейсу користувача

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

Як щодо того, щоб просто замість цього використати Popostra Bootstrap? BS-popovers не створюють однакового конфлікту, хоча їм потрібен той самий компонент tooltip.js. Так, вони більш стилізовані, але не призводять до того, що мої кнопки користувальницького інтерфейсу JQuery стають непростими.

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

спробуйте скористатися jQuery.noConflict () і подивіться, чи це вам взагалі допомагає. Схоже, bootstrap та jQuery використовують одне й те саме простір імен, і, можливо, підказки для завантажувальної програми та jQuery завантажуються в одну і ту ж функцію, або один завантажується спочатку.

Ви також можете перевірити, яку бібліотеку завантажено першою. Зазвичай, якщо ви декларуєте одну і ту ж функцію двічі в JavaScript, друга використовується та, яка використовується.

По-третє, перевірте пакет jQueryUI ( на їхньому веб-сайті) і побачите, чи можете ви завантажити версію, яка не містить підказки (я перевірив, і це цілком можливо).

Є просте і гарне рішення, просто переставіть посилання на завантажувальний файл та файл 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, щоб завантажувальний файл .tooltip заміняв інтерфейси jquery. Якщо ви використовуєте завантажувач модулів, як Requjs, ви можете зробити bootstrap залежним від jquery-ui, як такого:

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