テーブル行ホバーのブートストラップポップオーバー：ポップオーバー内のリンクをクリックすることはできません

Question

私は、テーブルの行にtwitterブートストラップポップオーバーの追加情報を表示します。

私が一緒に仕事インタラクションデザインから数リアクション：

• Popoversはあなたが行を置くと
• Popoversが、今のリンクを1つの以上のリンク

が含まれています表示しなければなりません部分は難しい部分です。マウスをテーブル行からポップオーバー（リンクを含む）に移動すると、のポップオーバーは消えます！

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

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

- 生成と

お知らせこの{placement: 'bottom' }data-content属性に置かれているリンクを含む関連のhtmlを前提としています。 popoverにマウスを動かすことができるように、私は{placement: 'in bottom'}（inキーワードを追加しました。セレクタの中にpopover dom要素を生成します）。

問題はテーブル行ですが、実際には正当なHTMLではありません。おそらくそれがplacement: 'in bottom'がさらに醜いレンダリングをする理由です：私のビューポートの上部にPopoverが接着します。

それは例が含まれていMy example on JSFiddleの私のデモを試してみてください...

私の質問です、リンクをクリックすることが可能であるように、私は、私のポップオーバーを定義する必要がありますか - によって設定された制限が与えられましたインタラクションデザイン？

Answer 1

問題は、ポップオーバーがそれがするはずのことをしっかりとしています。 <tr>にポップオーバーを添付して、ポップオーバーがホバーに応答するようにして、ポップオーバーが<tr>の下にハングアップすると、ポップオーバーの内容に到達できなくなります。

トリガー：ホバーを簡単にトリガによって模倣することができます。この

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

設定トリガーのようなマニュアル：マニュアルは、ポップオーバーの動作を操作するために私達を可能にします。以下の解決方法では、mouseenter/mouseleave -eventsに少し遅れを加え、マウスがポップオーバーの内側にあるかどうかをチェックします（ポップオーバー自体にイベントを付加することによって）。マウスがポップオーバーの内側にある場合、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); 
});