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 issue 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()メソッドが起動されます。これは jQuery メソッドと同等hide()で、要素のスタイルを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 に答える
2

私にとっては (Bootstrap ソース コードを変更することなく)、イベントを防止し、ツールチップを非表示にする "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 に答える