9

Twitter ブートストラップ ポップオーバーに追加情報を表示するテーブル行があります。

私が扱っているインタラクションデザインからのいくつかのメモ：

  • 行にカーソルを合わせたときにポップオーバーが表示される必要があります
  • ポップオーバーには 1 つ以上のリンクが含まれます

さて、リンク部分は難しい部分です。マウスを表の行からポップオーバー (リンクを含む) に移動すると、ポップオーバーが消えます!

私はこのコードでポップオーバーを作成しています:

var options = {placement: 'bottom', trigger: 'hover', html: true};
$(this).popover()

-- これは、リンクを含む関連する html が生成され、data-content属性に配置されていることを前提としています

これに注意してください{placement: 'bottom' }。マウスをポップオーバーに移動できるようにするために、試してみました (セレクター内にポップオーバー dom 要素を生成するキーワードを{placement: 'in bottom'}追加)。in

問題はテーブルの行で、これは実際には HTML に関しては合法ではありません。placement: 'in bottom'おそらくそれがレンダリングがさらに醜い理由です。ポップオーバーがビューポートの上部にくっつきます。

JSFiddleの My example で私のデモを試してください

例が含まれています...

私の質問は、インタラクション設計によって設定された制限を考慮して、リンクをクリックできるように、ポップオーバーをどのように定義する必要があるかということです。

4

1 に答える 1

8

問題は明らかに、ポップオーバーが本来の動作をすることです。にポップオーバーをアタッチし<tr>、ポップオーバーがホバーに反応するようにすると (ポップオーバーが<tr>の下部にぶら下がると)、ポップオーバーのコンテンツにアクセスできなくなります。

Trigger:hover は、次のように trigger:manual で簡単に模倣できます

$('table').on('mouseenter', 'tr', function() {
    $(this).popover('show');
});
$('table').on('mouseleave', 'tr', function() {
    $(this).popover('hide');    
});

trigger:manual を設定すると、ポップオーバーの動作を操作できるようになります。mouseenter以下の解決策は/ -eventsに少し遅延を追加しmouseleave、マウスがポップオーバー内にあるかどうかを確認します (イベントをポップオーバー自体にアタッチすることによって)。mouseenterマウスがポップオーバー内にある場合、新しいポップオーバーは表示されず、別の に -eventがあったとしても、アクティブなポップオーバーは非表示になりません<tr>。分岐した jsfiddle : http://jsfiddle.net/xZxkq/

var insidePopover=false;

function attachEvents(tr) {
    $('.popover').on('mouseenter', function() {
        insidePopover=true;
    });
    $('.popover').on('mouseleave', function() {
        insidePopover=false;
        $(tr).popover('hide');
    });
}

$('table').on('mouseenter', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) {
            $(tr).popover('show');
            attachEvents(tr);
        }
    }, 200);
});

$('table').on('mouseleave', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) $(tr).popover('hide');  
    }, 200);
});
于 2013-05-17T08:27:58.173 に答える