jQueryUI工具提示正在与Twitter Bootstrap竞争
jQueryUI工具提示正在与Twitter Bootstrap竞争
提问于 2012-12-06 04:00:45
通过以下代码，我最终获得了一些工具提示：
<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>然后
<script>
$('[rel=tooltip]').tooltip();
</script>我遇到的问题是它使用的是jQueryUI工具提示(没有箭头，又大又丑的工具提示)，而不是Bootstraps。
要使用Bootstrap工具提示而不是jQueryUI，我需要做些什么？
回答 11
Stack Overflow用户
发布于 2013-10-08 20:40:13
jQuery UI和Bootstrap都使用tooltip作为插件的名称。使用$.widget.bridge为jQuery UI版本创建不同的名称，并允许引导插件保持命名为tooltip (尝试在引导小部件上使用noConflict选项只会导致许多错误，因为它不能正常工作；that issue has been reported here)：
// 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>Stack Overflow用户
发布于 2014-10-21 07:18:54
一个简单的解决方案是在jquery-ui.js之后加载bootrap.js，这样bootstrap .tooltip方法优先。
Stack Overflow用户
发布于 2016-08-05 06:12:23
如果你必须在bootstrap.js之后加载jquery-ui.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的工具提示，并始终使用引导。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13731400
复制相关文章
相似问题