5

Twitter Bootstrap 2.0 と popover-plugin を使用して次のことを達成しようとしましたが、数時間経ってもまだわかりません。

私のページの左下隅に、鳥の写真がありました。この鳥は、すべてのポップオーバー (たとえば、登録フォームのポップオーバー) を「話す」必要があり、鳥の上に表示される必要があります。これは可能ですか？

理解を深めるために、ここにテスト サイトを作成しました。登録フィールドにカーソルを合わせると、ポップオーバーが表示されます。左下隅の鳥の画像の上にそれらを表示したいのですが、これを達成する方法がわかりません。お役に立てば幸いです。

4

1 に答える 1

7

方法 1:

jQueryホバーハンドラーは「in」メソッドと「out」メソッドを受け取り、サンプルでは「in」メソッドのみを割り当ててポップアップを表示します。これでも構いませんが、「これ」に付けるのではなく、鳥の画像に付ける必要があります。ポップアップのトリガーも手動に変更してください。次に、ホバーの「アウト」メソッドで、ポップオーバーを非表示にするだけです。

$('#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');
});

編集: サンプル コードを追加しました。これをテストする機会がないので、構文エラーか何かがあるかもしれませんが、一般的な考え方はそこにあります。

于 2012-06-23T17:44:54.110 に答える