2012-04-15 13 views
3

私はブートストラップのポップオーバーウィジェットを使用していましたが、私が気に入っている間に、ハイパーリンクやボタンをポップオーバー本体のコンテンツ内に配置することが大好きです。実際にそこに置くことができますが、問題はユーザーがそれらをクリックできるようにすることです。ブートストラップのポップオーバーに焦点を当ててください

もっと具体的には、問題は - とにかくデフォルトのオプションで - リンクを離れてポップオーバーに向かって移動するとすぐに問題が消えます。 delay {hide}の設定をダイヤルする以外の方法はありますか?私の心の中の "正しい"解決策はタイトな "隠す設定"(別名、遅延:{hide:100})を保つことですが、カーソルを移動させてポップオーバーを行ってタイマーを開始しないようにします。

私はここで簡単なトリックを欠場しています。すべての助けを歓迎します。

+0

を追加してい参照するために使用する場合は、次のとおりです、ポップオーバーが表示さに、リンク上のリンクの短い説明を合わせます説明の中には「詳細」のボタンがあります。ユーザーの関心がまだピークに達している場合、カーソルをポップオーバーに移動して「詳細」ボタンをクリックすることができます。 – ken

+0

ユースケースの可能な解決策については、http://stackoverflow.com/questions/7703878/how-can-i-hold-twitter-bootstrap-popover-open-until-my-mouse-moves-into-itを参照してください。 – Jon

+0

ありがとうジョン、そのスレッドは非常に関連しています – ken

答えて

7

以下のコードは、マウスオーバーするとポップオーバーを表示し、マウスが離れると表示し続けます。おそらく、少し遅れてゲームにHTH

+0

ありがとうmacsig。私は今日/明日それを渦にして、すぐに私の結果を戻ってきます。 – ken

+0

申し訳ありませんが、これにはまだ戻っていません。 EOWで試してみる。 – ken

+1

それはあなたがそれをどのように去ったら扱いますか?どのjqueryイベントに耳を傾けますか? – Dean

6

$("span[rel=popover]").popover('hide'); 

を呼び出し、それを閉じるために

$("span[rel=popover]").popover({ trigger: 'manual' }).hover(function(e){ 
$(this).popover('show'); 
e.preventDefault(); 
}); 

が、私はちょうど「オーバークリックしてください」と呼ばれるこのポップオーバーバリアントに出くわしました。このソリューションはあなたのニーズをカバーし、他にもいくつかの便利な方法があります。

http://www.leecarmichael.com/bootstrapx-clickover/examples.html

+0

ありがとうございました。これはよさそうだ。 – ken

関連する問題