3

当社の顧客のアプリケーションは Bootstrap 2.3.2 で実行されており、いくつかの古いプラグインとの互換性のために、まだ jQuery 1.8.3 です。

このアプリケーションは、フォルダーとグリッド ビューを備えたメディア ファイル オーガナイザーです。各フォルダー内で開くことができるファイルマネージャーモーダルがあります。モーダルには、フォルダ内のすべてのファイルのリストと、各ファイルのコントロール (移動、名前変更など) が表示されます。コントロールはアイコンで表されるため、わかりやすくするために、ユーザーがアイコンにカーソルを合わせたときに Bootstrap ツールチップも追加したいと考えました。

モーダルには、次の jQuery コードが関連付けられています。現在のフォルダー内のファイルへの変更を表示するために、モーダルを閉じた後 (後) にページをリロードします。

// Listen for close event on file manager modal
$('#modal-manage-files').on('hide',function() {
    location.reload();
});

次のコードを使用して、モーダルのコントロール アイコンにツールチップを追加しました...

$('.file-actions i.fa').tooltip({
    animation: false
});

...またはこのコード(どちらも機能しません):

$('.file-actions i.fa')
    .tooltip({ trigger: 'manual', animation: 'false' })
    .on({
        mouseenter: function(e) {
            e.stopPropagation();
            $(this).tooltip('show');
        },
        mouseleave: function(e) {
            e.stopPropagation();
            $(this).tooltip('hide');
        }
});

ツールチップは適切に表示されますが、アイコンの 1 つからカーソルを離すと (明らかにツールチップの「非表示」イベントがトリガーされます)、モーダルの「非表示」イベントもトリガーされ、ページがリロードされます!

ここで干渉しているコードが他にある可能性があるかどうかはまだ調査中ですが、SO の職人の誰かが私が見逃しているものを見つけられるかどうかを確認するために、これをここに掲載したかったのです。

4

0 に答える 0