12

更新到引导程序 2.3.0 后，我注意到弹出工具提示的奇怪行为。

如果您输入该字段并尝试离开，工具提示将消失并隐藏输入字段。此问题仅在最新版本的引导程序中出现，不确定具体更改了什么，但 2.2.2 与 Prototype 配合良好。

jQuery.noConflict();
jQuery('input[data-content]').popover({
    trigger: 'focus'
});

这是工作示例：http: //jsfiddle.net/U6EDs/4/

4

8 回答 8

22

这个 github 问题https://github.com/twitter/bootstrap/issues/6921描述了您所看到的内容。我正在复制问题中的信息。

bootstrap-tooltip.js 中的这些行会导致问题：

  , 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

PrototypeJS 向 Element 原型添加方法，因此当 jQuery 尝试在hide()元素上触发该方法时，它实际上是在触发 PrototypeJShide()方法，该方法等效于 jQueryhide()方法并将元素的样式设置为display:none;

你有几个选择

  1. 删除js文件中上面标记的行
  2. 将事件重命名为其他名称（不隐藏）
  3. 使用 BootStrap 的 PrototypeJS 分支（目前适用于 2.3.2）

http://github.com/jwestbrook/bootstrap-prototype

*****免责声明***

我是目前正在将 BootStrap JS 组件移植到 PrototypeJS 的开发人员

于 2013-02-26T17:39:37.003 回答
5

我知道这是一个老问题，但我（再次）遇到了这个问题，上面的答案对我不起作用。我最终找到了一个解决方案，而无需侵入任何库。这个想法是在隐藏元素后显示元素。没有闪烁，效果很好。

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

您可以对工具提示使用相同的技术，只需使用on('hidden.bs.tooltip'), ...

请注意，我在大部分个人测试中都使用 Bootstrap 3.0.0。这是使用 BS 2.3 的问题的更新小提琴：http: //jsfiddle.net/calypsonian/U6EDs/13/

于 2014-02-12T21:28:11.390 回答
5

我花了一些时间研究这个。

这就是它发生的原因。

Prototype 的策略是用新的行为扩展DOM 元素类，例如“隐藏”。相当于：

HTMLElement.prototype.hide = function(...) {...};

jQuery 假设如果一个元素有一个与事件同名的函数，那么当该事件被触发时，它被认为是该元素的默认行为。例如，这对于“focus”、“blur”等事件很有用，其中既有名为“focus”的事件，也有元素上的匹配函数.focus()。当您调用 jQuery 时event.preventDefault()，它实际上并没有阻止默认行为。相反，如果您不调用event.preventDefault()，则 jQuery 会查找与事件同名的函数，然后在它存在时调用它。

这是手动调用“默认行为”函数的 jQuery src： https ://github.com/jquery/jquery/blob/d837f119c3729565103005d5d7fa89e1dd8110cb/src/event.js#L338

因此，我们遇到了问题。Prototype 使用新功能（即“隐藏”）扩展了基本的 HTMLElement 原型。当触发同名事件时，jQuery 将这些函数视为默认行为。Bootstrap 的 JS 触发了一个同名事件（'hide'），这会错误地导致 jQuery 调用 Prototype 的Element.hide()函数。

我将根据这些信息研究解决方案。大概是这样的：

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);
});
于 2014-06-16T04:02:54.820 回答
2

对我来说更好的（不更改引导源代码）是防止事件并手动删除隐藏工具提示的“in”类：

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

});

唯一的问题是它阻止触发“hidden.bs.tooltip”事件。但如果您不介意，我建议使用此解决方案，因为它不会导致闪烁

于 2014-04-28T15:02:50.117 回答
2

您可以在 mouseleave 事件中再次显示它，例如，

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

现场演示

于 2014-09-03T11:37:32.513 回答
1

我添加了一个重要的 CSS 样式来覆盖原型添加的元素样式。这对我有用，因为什么都不应该隐藏元素。

#elemId{
  display: block!important; /* or whatever the original display was */
}
于 2015-11-24T09:00:24.960 回答
0

我通过以这种方式编辑 Bootstrap JS “修复”了该错误：（
注释掉行this.$element.trigger(e)）

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

  this.$tip.trigger(e)
//this.$element.trigger(e)
  if (e.isDefaultPrevented()) return
于 2013-11-07T14:00:08.887 回答
0

一种可能的解决方案是始终通过 CSS 显示元素。

[data-toggle=tooltip] {
    display: block!important;
}
于 2015-02-27T08:22:42.203 回答