blocks|key|1921635|text|这篇github+issue+https://github.com/twitter/bootstrap/issues/6921描述了你所看到的。我正在复制这期杂志中的信息。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1921636|bootstrap-tooltip.js中的以下几行代码会导致问题：|1921637|++,+hide:+function+()+{
++var+that+=+this
++++,+$tip+=+this.tip()
++++,+e+=+$.Event('hide')+++///this+line

++this.$element.trigger(e)++///+this+line
++if+(e.isDefaultPrevented())+return+//and+this+line+|code-block|syntax|javascript|1921638|PrototypeJS将方法添加到元素原型中，因此当jQuery尝试在元素上触发hide()方法时，它实际上会触发PrototypeJS+hide()方法，该方法等同于jQuery+hide()方法，并将元素的样式设置为display:none;|style|CODE|1921639|您有几个选择|1921640|1921641|在js文件中删除上面标记的行|ordered-list-item|1921642|将事件重命名为其他名称(而不是隐藏)|1921643|使用BootStrap的PrototypeJS分支(当前适用于2.3.2)|1921644|1921645|http://github.com/jwestbrook/bootstrap-prototype|1921646|*免责声明*|1921647|我是目前正在将BootStrap+JS组件移植到PrototypeJS的开发人员|1921648|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twitter/bootstrap/issues/6921|1^0|F|1C|0|0|0|0|14|6|1X|6|2J|6|32|D|0|0|0|0|0|0|0|0|1C|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1J|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1K|8|@$A|1L|B|1M|M|N]|$A|1N|B|1O|M|N]|$A|1P|B|1Q|M|N]|$A|1R|B|1S|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1T|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]|$1|R|3|S|5|T|7|1V|8|@]|9|@]|C|$]]|$1|U|3|V|5|T|7|1W|8|@]|9|@]|C|$]]|$1|W|3|X|5|T|7|1X|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|Z|3|10|5|6|7|1Z|8|@]|9|@$A|20|B|21|1|22]]|C|$]]|$1|11|3|12|5|6|7|23|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|24|8|@]|9|@]|C|$]]|$1|15|3|-4|5|6|7|25|8|@]|9|@]|C|$]]]|16|$17|$5|18|19|1A|C|$1B|1C]]|1D|$5|18|19|1A|C|$1B|10]]]]

This github issue <a href="https://github.com/twitter/bootstrap/issues/6921" rel="noreferrer">https://github.com/twitter/bootstrap/issues/6921</a> describes what you are seeing. I am copying the information from the issue.

these lines in bootstrap-tooltip.js cause the problem:

<pre><code> , hide: function () {
 var that = this
 , $tip = this.tip()
 , e = $.Event('hide') ///this line

 this.$element.trigger(e) /// this line
 if (e.isDefaultPrevented()) return //and this line 
</code></pre>

PrototypeJS adds methods to the Element prototype so when jQuery tries to trigger the <code>hide()</code> method on an element it is actually firing the PrototypeJS <code>hide()</code> method, which is equivalent to the jQuery <code>hide()</code> method and sets the style of the element to <code>display:none;</code>

You have a few options

<ol>
<li>remove the lines marked above in the js file</li>
<li>rename the event to something else (not hide)</li>
<li>use the PrototypeJS fork of BootStrap (currently works with 2.3.2)</li>
</ol>

<a href="http://github.com/jwestbrook/bootstrap-prototype" rel="noreferrer">http://github.com/jwestbrook/bootstrap-prototype</a>

*****DISCLAIMER***

I am the developer that is currently porting the BootStrap JS components to PrototypeJS

blocks|key|1921653|text|我通过这样编辑Bootstrap+JS来“修复”这个bug：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1921654|(注释掉行this.$element.trigger(e))|offset|length|style|CODE|1921655|,+hide:+function+()+{
++var+that+=+this
++++,+$tip+=+this.tip()
++++,+e+=+$.Event('hide')

++this.$tip.trigger(e)
//this.$element.trigger(e)
++if+(e.isDefaultPrevented())+return|code-block|syntax|javascript|1921656|entityMap^0|0|5|O|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I "fixed" the bug by editing Bootstrap JS in this way: 
(comment out line <code>this.$element.trigger(e)</code>)

<pre><code>, hide: function () {
 var that = this
 , $tip = this.tip()
 , e = $.Event('hide')

 this.$tip.trigger(e)
//this.$element.trigger(e)
 if (e.isDefaultPrevented()) return
</code></pre>

blocks|key|5272730|text|我知道这是一个老问题，但我只是(再次)遇到了这个问题，上面的答案对我来说是行不通的。我最终找到了一个不需要进入任何库的解决方案。这个想法是在元素被隐藏后显示它。没有闪烁，而且效果很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5272731|jQuery(function+()+{
++++jQuery.noConflict();
++++++++jQuery('input[data-content]').popover({
++++++++++++trigger:+'focus'
++++++++}).on('hidden.bs.popover',+function(){
++++++++++++jQuery(this).show();
++++++++});
});|code-block|syntax|javascript|5272732|您可以对工具提示使用相同的技术，只需使用on('hidden.bs.tooltip'),+...|offset|length|style|CODE|5272733|注意，我使用Bootstrap+3.0.0进行大部分个人测试。以下是使用BS+2.3的问题的更新小提琴：http://jsfiddle.net/calypsonian/U6EDs/13/|5272734|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/calypsonian/U6EDs/13/^0|0|0|K|S|0|1G|15|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I know this is an old question, but I just ran into this (again) and the above answers were not going to work for me. I ended up finding a solution without hacking into any libraries. The idea is to show the element after it is hidden. There is no flickering and it works nice.

<pre><code>jQuery(function () {
 jQuery.noConflict();
 jQuery('input[data-content]').popover({
 trigger: 'focus'
 }).on('hidden.bs.popover', function(){
 jQuery(this).show();
 });
});
</code></pre>

You could use the same technique for tooltips, just use <code>on('hidden.bs.tooltip'), ...</code>

Note, I am using Bootstrap 3.0.0 for most of my personal testing. Here is an updated fiddle from the question which uses BS 2.3:
<a href="http://jsfiddle.net/calypsonian/U6EDs/13/">http://jsfiddle.net/calypsonian/U6EDs/13/</a>

blocks|key|5272761|text|对我来说(不用更改Bootstrap源代码)更好的做法是防止事件发生，并手动删除隐藏工具提示的"in“类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5272762|jQuery("input").on('hide.bs.tooltip',+function(e)+{
++++e.preventDefault();
++++$("div.tooltip.in").removeClass('in');

});|code-block|syntax|javascript|5272763|唯一的问题是它阻止触发"hidden.bs.tooltip“事件。但是如果你不介意的话，我建议你使用这个解决方案，因为它不会引起闪烁|5272764|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|$]]

For me the better (without changing Bootstrap source code) is to prevent event and manually remove "in" class which hides tooltip:

<pre><code>jQuery("input").on('hide.bs.tooltip', function(e) {
 e.preventDefault();
 $("div.tooltip.in").removeClass('in');

});
</code></pre>

Only issue is that it prevents from firing "hidden.bs.tooltip" event. But if you don't mind it I suggest using this solution as it doesn't cause flickering

blocks|key|1921752|text|我花了一些时间调查这件事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1921753|这就是为什么会发生这种情况。|1921754|Prototype的策略是使用新的行为对DOM元素类进行隐藏扩展，例如“”。等同于：|offset|length|style|BOLD|1921755|HTMLElement.prototype.hide+=+function(...)+{...};|code-block|syntax|javascript|1921756|jQuery做了一个假设，如果一个元素有一个与事件同名的函数，那么当该事件被触发时，它就被认为是该元素的默认行为。例如，这对于'focus'，‘.focus()’等事件很有用，在这些事件中，既有名为'focus‘的事件，也有元素focus上的匹配函数。当您调用jQuery的event.preventDefault()时，它实际上并不是阻塞的默认行为。相反，它是相反的--如果您不调用event.preventDefault()，那么jQuery将查找与事件同名的函数，如果它存在，则调用它。|CODE|1921757|下面是手动调用“默认行为”函数的jQuery+src：https://github.com/jquery/jquery/blob/d837f119c3729565103005d5d7fa89e1dd8110cb/src/event.js#L338|1921758|因此，我们就有了问题。Prototype使用新功能扩展了基本HTMLElement原型(即“隐藏”)。当触发相同名称的事件时，jQuery将这些函数视为默认行为。Bootstrap的JS触发了一个同名的事件('hide')，这会错误地导致jQuery调用Prototype的Element.hide()函数。|1921759|我将根据这些信息来研究解决方案。可能是这样的：|1921760|jQuery(window).load(function()+{
++++//+Defer+this+code+until+after+the+window+'load'+event+finishes+firing
++++setTimeout(function()+{
++++++++window.HTMLElement+&&
++++++++window.HTMLElement.prototype.hide+&&
++++++++delete+window.HTMLElement.prototype.hide;
++++},+0);
});|1921761|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery/blob/d837f119c3729565103005d5d7fa89e1dd8110cb/src/event.js#L338^0|0|0|10|6|0|0|0|6U|20|8|3T|M|5C|M|0|0|3F|R|2O|0|0|0|4A|3T|E|0|0|N|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|19|8|@$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1D|8|@$F|1E|G|1F|H|I]|$F|1G|G|1H|H|Q]|$F|1I|G|1J|H|Q]|$F|1K|G|1L|H|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1M|8|@$F|1N|G|1O|H|I]]|9|@$F|1P|G|1Q|1|1R]]|A|$]]|$1|T|3|U|5|6|7|1S|8|@$F|1T|G|1U|H|I]|$F|1V|G|1W|H|Q]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1X|8|@$F|1Y|G|1Z|H|I]]|9|@]|A|$]]|$1|X|3|Y|5|L|7|20|8|@]|9|@]|A|$M|N]]|$1|Z|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

I spent some time looking into this.

Here's why it happens.

Prototype's strategy is to extend the DOM element classes with new behaviors, for example 'hide'. Equivalent of:

<pre><code>HTMLElement.prototype.hide = function(...) {...};
</code></pre>

jQuery makes an assumption that if an element has a function with the same name as an event, then it is considered the default behavior of the element when that event is triggered. For example, this is useful for the events 'focus', 'blur', etc, where there is both an event by that name 'focus' and a matching function on the element <code>.focus()</code>. When you call jQuery's <code>event.preventDefault()</code>, it's not actually blocking the default behavior. Instead it's the inverse -- if you don't call <code>event.preventDefault()</code>, then jQuery looks for a function with the same name as the event and then calls it if it exists.

Here's the jQuery src that manually calls the "default behavior" function:
<a href="https://github.com/jquery/jquery/blob/d837f119c3729565103005d5d7fa89e1dd8110cb/src/event.js#L338" rel="noreferrer">https://github.com/jquery/jquery/blob/d837f119c3729565103005d5d7fa89e1dd8110cb/src/event.js#L338</a>

Thus, we have our problem. Prototype extends the base HTMLElement prototype with new functions (namely, 'hide'). jQuery considers these functions to be default behaviors when an event of the same name is fired. Bootstrap's JS triggers an event of the same name ('hide'), which mistakenly causes jQuery to call Prototype's <code>Element.hide()</code> function.

I am going to look into a solution based on this information. Probably something along the lines of:

<pre><code>jQuery(window).load(function() {
 // Defer this code until after the window 'load' event finishes firing
 setTimeout(function() {
 window.HTMLElement &amp;&amp;
 window.HTMLElement.prototype.hide &amp;&amp;
 delete window.HTMLElement.prototype.hide;
 }, 0);
});
</code></pre>

blocks|key|5272887|text|您可以在mouseleave事件上再次显示它，例如，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5272888|jQuery(function(){++
++++jQuery('[data-toggle="popover"]').popover().on('mouseleave',function(){
+++++++$(this).show(0);+//+show+it+again+when+mouse+leave+event+fires
++++});
});|code-block|syntax|javascript|5272889|5272890|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

You can show it again on mouseleave event like,

<pre><code>jQuery(function(){ 
 jQuery('[data-toggle="popover"]').popover().on('mouseleave',function(){
 $(this).show(0); // show it again when mouse leave event fires
 });
});
</code></pre>

<a href="http://jsbin.com/micesekanati/1/edit" rel="nofollow">Live Demo</a>

blocks|key|5272937|text|一种可能的解决方案是始终通过CSS显示元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5272938|[data-toggle=tooltip]+{
++++display:+block!important;
}|code-block|syntax|javascript|5272939|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|$]]

One possible solution is to always show the element through CSS.

<pre><code>[data-toggle=tooltip] {
 display: block!important;
}
</code></pre>

blocks|key|5755408|text|我添加了一个重要的CSS样式来覆盖prototype添加的元素样式。这对我来说很有效，因为不应该有任何东西隐藏元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5755409|#elemId{
++display:+block!important;+/*+or+whatever+the+original+display+was+*/
}|code-block|syntax|javascript|5755410|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|$]]

I added an important CSS style to override the element style that prototype adds. This works for me because nothing should be hiding the element.

<pre><code>#elemId{
 display: block!important; /* or whatever the original display was */
}
</code></pre>

After updating to bootstrap 2.3.0 I noticed strange behaviour of popover tooltip.

If you enter the field and try to navigate away, tooltip would disappear and hide input field. This issue occurs only with latest version of bootstrap, not sure what exactly was changed, but 2.2.2 works well with Prototype.

<pre><code>jQuery.noConflict();
jQuery('input[data-content]').popover({
 trigger: 'focus'
});
</code></pre>

Here is working example: <a href="http://jsfiddle.net/U6EDs/4/" rel="noreferrer">http://jsfiddle.net/U6EDs/4/</a>

Popover hides parent element if used with Prototype JS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在更新到bootstrap 2.3.0之后，我注意到popover工具提示的奇怪行为。如果您输入该字段并尝试离开，工具提示将消失并隐藏输入字段。这个问题只在最新版本的bootstrap上出现，不确定到底有什么变化，但2.2.2在Prototype上工作得很好。jQuery.noConflict();jQuery('in...

问如果与原型JS一起使用，Popover将隐藏父元素
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果与原型JS一起使用，Popover将隐藏父元素EN