Twitter Bootstrap、1つの部門にすべてのポップオーバーを表示

Question

Twitter Bootstrap 2.0を使用して以下を達成しようとしましたが、それはポップオーバープラグインですが、数時間後にはまだ分かりません。

私のページの左下隅には、鳥を示す画像があります。この鳥は、鳥の上に登場するはずのすべてのポップオーバー、例えば登録フォームのためのものを「話す」べきである。これは可能ですか？

わかりやすくするために、テストサイトover hereを作成しました。登録欄の上にマウスを移動すると、ポップオーバーが表示されます。私はそれらを左下のbird-imgの上に表示したいが、これを達成する方法はわからない。もしあなたが私を助けることができれば素晴らしいだろう。

Answer 1

方法1：

ポップアップを表示するには、jQueryのホバーハンドラは、「内」と「外」方式を取り、あなたのサンプルではあなただけ「の」メソッドを割り当てています。これは問題ありませんが、 "this"に添付するのではなく、あなたの鳥の画像に添付する必要があります。ポップアップのトリガも手動に変更してください。ホバーの "out"メソッドでは、ポップオーバーを隠すだけです。

$('#registerHere input').hover(function() 
{ 
    $('#birdie').popover({ 
      "trigger": 'manual', 
      "placement":'top', 
       }).popover('show'); 
}, 
function() 
{ 
    $('#birdie').popover('hide'); 
}); 

方法2：

代わりに、あなたが持っているものに保つが、提供された「セレクタ」オプションを使用し、それをパラメータとして、あなたの鳥のイメージを与え、これはあなたのコントロールからポップオーバーをトリガする必要がありますそれをあなたの鳥の画像に委ねます。

セレクタ：追加のサンプルコード：セレクタが設けられている場合、ツールヒントは が指定されたターゲット

$('#registerHere input').hover(function() 
{ 
    $('#birdie').popover({ 
      "selector": "#birdie", 
      "placement":'top', 
       }).popover('show'); 
}); 

EDITに委譲されるオブジェクト。 私はこれをテストするチャンスがないので、構文エラーなどがあるかもしれませんが、一般的な考え方があります。