Мне удалось получить некоторые подсказки для работы, наконец, с помощью следующего кода:
<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, так что метод начальной загрузки .tooltip имеет приоритет.
Это сработало для меня:
Если вам нужно использовать JQuery-UI, но вы хотите использовать всплывающую подсказку bootstrap, просто получите пользовательскую версию JQuery-UI с этого сайта.
Просто снимите флажок "Tooltip" и загрузите его (это будет что-то вроде "jquery-ui-1.10.4.custom.js" ).
Просто добавьте его в свой проект, а не версию, которую вы сейчас используете, и вы готовы к участию. Это позволит избежать конфликта. Это работало как шарм для меня!
Это решение, кажется, хорошо работает для меня.
// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.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>var jQuery.fn.tooltip = _tooltip;</script>Предполагая, что UI вызывается после инициализации начальной загрузки
Сохраните функцию начальной загрузки непосредственно перед инициализацией пользовательского интерфейса
jQuery.fn.bstooltip = jQuery.fn.tooltip;
Затем назовите его следующим
$('.targetClass').bstooltip();
Как насчет того, чтобы вместо этого использовать Bootstrap popovers? Попутчики BS не создают один и тот же конфликт, хотя для них требуется один и тот же компонент tooltip.js. Да, они более стилизованы, но не заставляют кнопки JQuery UI работать.
Я использую JQuery UI только для пользовательских автозаполнений /comboboxes (поэтому не могу утверждать, что другие элементы управления JQ-UI в порядке), и ни одно из вышеизложенных действий не устраняет проблему CSS на кнопках combobox, которые становятся "незакрепленными" при вызове Подсказки BS. Переключение на BS Popovers обеспечило практически тот же эффект без конфликтов, без переупорядочения моих импорта script и не требовалось явных инструкций моста.
попробуйте использовать jQuery.noConflict() и посмотреть, поможет ли это вам вообще. Похоже, что bootstrap и jQuery используют одно и то же пространство имен, и, возможно, всплывающие подсказки bootstrap и jQuery загружаются в одну и ту же функцию или сначала загружаются.
Вы также можете проверить, какая библиотека загружается в первую очередь. Обычно, если вы объявляете одну и ту же функцию дважды в javascript, вторая - та, которая используется.
В-третьих, проверьте пакет jQueryUI (на своем сайте) и посмотрите, можете ли вы загрузить версию, в которой нет всплывающих подсказок (I и это полностью выполнимо).
Существует простое и правильное решение, просто перестройте ссылку для загрузки и jquery ui file следующим образом:
<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' ]
},...