blocks|key|1710776|text|尝试使用jQuery.noConflict()，看看它是否对您有所帮助。看起来bootstrap和jQuery使用相同的名称空间，可能bootstrap和jQuery工具提示被加载到同一个函数中，或者先加载一个。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1710777|您还可以查看哪个库是首先加载的。通常，如果你在javascript中声明同一个函数两次，那么第二个就是使用的那个。|1710778|第三，检查jQueryUI包(on+their+website)+)，看看你是否可以下载一个不包含工具提示的版本(我检查过了，这是完全可行的)。|1710779|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.noConflict/|1|http://jqueryui.com/download/^0|4|J|0|0|0|F|H|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

<p>try using <a href="http://api.jquery.com/jQuery.noConflict/" rel="nofollow">jQuery.noConflict()</a> and see if that helps you at all. It looks like bootstrap and jQuery are using the same namespace, and perhaps the bootstrap and jQuery tooltips get loaded into the same function, or one gets loaded first.</p>

<p>You can also check to see which library is loaded first.  Usually if you declare the same function twice in javascript the second one is the one that is used.</p>

<p>Thirdly, check the jQueryUI package (<a href="http://jqueryui.com/download/" rel="nofollow">on their website)</a> and see if you can download a version that does not have the tooltips included (I checked and this is totally doable).</p>


blocks|key|1710827|text|This+solution似乎很适合我。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1710828|//+handle+jQuery+plugin+naming+conflict+between+jQuery+UI+and+Bootstrap
$.widget.bridge('uibutton',+$.ui.button);
$.widget.bridge('uitooltip',+$.ui.tooltip);|code-block|syntax|javascript|1710829|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twitter/bootstrap/issues/6303#issuecomment-12715745^0|0|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p><a href="https://github.com/twitter/bootstrap/issues/6303#issuecomment-12715745" rel="noreferrer">This solution</a> seems to work well for me.</p>

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


blocks|key|1710889|text|jQuery+UI和Bootstrap都使用tooltip作为插件的名称。使用$.widget.bridge为jQuery+UI版本创建不同的名称，并允许引导插件保持命名为tooltip+(尝试在引导小部件上使用noConflict选项只会导致许多错误，因为它不能正常工作；that+issue+has+been+reported+here)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1710890|//+Resolve+name+collision+between+jQuery+UI+and+Twitter+Bootstrap
$.widget.bridge('uitooltip',+$.ui.tooltip);|code-block|syntax|javascript|1710891|所以让它工作的代码：|1710892|//+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>|1710893|不错的复制粘贴代码，也可以处理按钮冲突：|1710894|<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>|1710895|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/issues/6303#issuecomment-12715745^0|M|7|13|F|2Y|A|3T|X|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1D|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1E|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>Both jQuery UI and Bootstrap use <code>tooltip</code> for the name of the plugin. Use <code>$.widget.bridge</code> to create a different name for the jQuery UI version and allow the Bootstrap plugin to stay named tooltip (trying to use the <code>noConflict</code> option on the Bootstrap widget just result in a lot of errors because it does not work properly; <a href="https://github.com/twbs/bootstrap/issues/6303#issuecomment-12715745">that issue has been reported here</a>):</p>

<pre><code>// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
</code></pre>

<p>So the code to make it work:</p>

<pre><code>// Import jQuery UI first
&lt;script src="/js/jquery-ui.js"&gt;&lt;/script&gt;
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
&lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
</code></pre>

<p>Nice copy paste code that also handles the button conflict:</p>

<pre><code>&lt;script type="application/javascript" src="/js/jquery.js"&gt;&lt;/script&gt;
&lt;script type="application/javascript" src="/js/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script&gt;
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
&lt;/script&gt;
&lt;script type="application/javascript" src="/js/bootstrap.js"&gt;&lt;/script&gt;
</code></pre>


blocks|key|1924460|text|使用Bootstrap+popovers如何？BS弹出窗口不会产生相同的冲突，尽管它们需要相同的tooltip.js组件。是的，它们更具风格化，但不会导致我的JQuery+UI按钮摇晃。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1924461|我使用Jquery+UI只用于自定义的自动完成/组合框(所以不能声称其他JQ-UI控件是ok的)，并且上面的任何一个都没有解决组合框按钮在调用BS工具提示时变得“无样式”的CSS问题。切换到BS+Popovers基本上提供了相同的效果，没有冲突，不需要重新排序我的脚本导入，也不需要显式的桥语句。|1924462|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>How about just using Bootstrap popovers instead? BS popovers do not create the same conflict although they require the same tooltip.js component. Yes, they are more stylized but doesn't cause my JQuery UI buttons to go wonky. </p>

<p>I'm using Jquery UI only for custom autocomplete/comboboxes (so can't claim other JQ-UI controls are ok) and none of the above worked to fix the CSS issue on the combobox buttons becoming "unstyled" when invoking BS Tooltips. Switching to BS Popovers provided essentially the same effect with no conflicts, no reordering of my script imports, and no explicit bridge statements needed.</p>


blocks|key|1711066|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1711067|如果您需要使用JQuery-UI，但又想使用bootstrap的工具提示，那么只需从该website获取一个自定义版本的JQuery-UI。|offset|length|1711068|只需取消选中"Tooltip“选项，然后下载它(它将类似于"jquery-ui-1.10.4.custom.js")。|1711069|只需将其添加到您的项目中，而不是您当前使用的版本，您就可以开始派对了。这将避免冲突。它对我来说就像是一种魔力！|1711070|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/download/^0|0|17|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>This worked for me:</p>

<p>If you need to use JQuery-UI but you want to use bootstrap's tooltip, simply get a customized version of JQuery-UI from this <a href="http://jqueryui.com/download/">website</a>.</p>

<p>Simply uncheck the "Tooltip" option, and download it (it will be something like "jquery-ui-1.10.4.custom.js").</p>

<p>Simply add it to your project instead of the version you are currently using now and, you are ready to party. This will avoid the conflict. It worked like a charm to me!</p>


blocks|key|1924617|text|一个简单的解决方案是在jquery-ui.js之后加载bootrap.js，这样bootstrap+.tooltip方法优先。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1924618|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>A simple solution is to load bootrap.js after jquery-ui.js, so that the bootstrap .tooltip method takes precedence.</p>


blocks|key|1711132|text|假设UI将在bootsrap初始化后调用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1711133|在初始化UI之前存储引导程序函数|1711134|jQuery.fn.bstooltip+=+jQuery.fn.tooltip;+|code-block|syntax|javascript|1711135|然后按如下方式调用它|1711136|$('.targetClass').bstooltip();|1711137|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Assuming that UI will called after bootsrap initialized</p>

<p>Store the bootstrap function just before the UI is initialized</p>

<pre><code>jQuery.fn.bstooltip = jQuery.fn.tooltip; 
</code></pre>

<p>Then call it as following</p>

<pre><code>$('.targetClass').bstooltip();
</code></pre>


blocks|key|1711291|text|如果你必须在bootstrap.js之后加载jquery-ui.js，这里是怎么做的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1711292|​|1711293|<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>|code-block|syntax|javascript|1711294|1711295|这将覆盖jquery-ui的工具提示，并始终使用引导。|1711296|entityMap^0|6|C|M|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>In case you must load <code>jquery-ui.js</code> after <code>bootstrap.js</code> here is how to do it:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="application/javascript" src="/js/jquery.js"&gt;&lt;/script&gt;
&lt;script type="application/javascript" src="/js/bootstrap.js"&gt;&lt;/script&gt;

&lt;script&gt;var _tooltip = jQuery.fn.tooltip;&lt;/script&gt;
&lt;script type="application/javascript" src="/js/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script&gt;jQuery.fn.tooltip = _tooltip;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>This will override jquery-ui's tooltip and always use bootstraps. </p>


blocks|key|1924929|text|一种简单的方法是在jquery-ui.js之后加载bootstrap.js，这样bootstrap+.tooltip就会覆盖jquery+ui。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1924930|requirejs.config({
++++baseUrl:+'js',
++++waitSeconds:+30,
++++shim:+{
++++++++'bootstrap':+{
++++++++++++deps:+[+'jquery',+'jquery-ui'+]
++++++++},...|code-block|syntax|javascript|1924931|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>An easy way is to load bootstrap.js after jquery-ui.js, so that the bootstrap .tooltip overrides jquery UI's. If you're using a module loader like requirejs, then you could make bootstrap dependent upon jquery-ui, as such: </p>

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


blocks|key|1711415|text|有一个简单而好的解决方案，只需像这样重新排列bootstrap和jquery+ui文件链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1711416|+<script+src="/js/jquery-ui.min.js"+type="text/javascript"></script>
+<script+src="/js/bootstrap.min.js"+type="text/javascript"></script>|code-block|syntax|javascript|1711417|只需在加载引导js文件之前加载jQueryui即可。这是我的工作。|1711418|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>There is a easy and good solution, just rearrange your bootstrap and jquery ui file link like this: </p>

<pre><code> &lt;script src="/js/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
 &lt;script src="/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
</code></pre>

<p>Just load jQueryui before loading boostrap js file. It's work for me.</p>


blocks|key|1925271|text|另一种方法是下载jquery+UI的自定义版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1925272|排除不需要的内容，在本例中为工具提示。|1925273|可以从这里下载https://jqueryui.com/download/|offset|length|1925274|这样，您就可以在任何地方包含它|1925275|entityMap|0|LINK|mutability|MUTABLE|url|https://jqueryui.com/download/^0|0|0|7|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>The other way is to download a custom build of jquery UI.</p>
<p>Exclude what is not needed, in this case, tooltip.</p>
<p>Can download it from here <a href="https://jqueryui.com/download/" rel="nofollow noreferrer">https://jqueryui.com/download/</a></p>
<p>This way you can include it anywhere</p>


<p>I have been able to get some tool tips to work <em>finally</em> with the following code:</p>

<pre><code>&lt;a href="#" rel="tooltip" title="Tool tip text here"&gt;Hover over me&lt;/a&gt;
</code></pre>

<p>and then</p>

<pre><code>&lt;script&gt;
    $('[rel=tooltip]').tooltip();
&lt;/script&gt;
</code></pre>

<p>The problem I'm running into is that it is using jQueryUI tooltips (no arrows, big ugly tooltips) instead of Bootstraps.</p>

<p>What do I need to do to make use of the Bootstrap Tooltips instead of jQueryUI?</p>


jQueryUI Tooltips are competing with Twitter Bootstrap

jQuery

通过以下代码，我最终获得了一些工具提示：<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>然后<script>    $('[rel=tooltip]').tooltip();</script>我遇到的问题是它使用的是jQuery...

问jQueryUI工具提示正在与Twitter Bootstrap竞争
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQueryUI工具提示正在与Twitter Bootstrap竞争EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQueryUI工具提示正在与Twitter Bootstrap竞争
EN