web-dev-qa-db-ja.com

Twitter bootstrapデスクトップおよびモバイルプラットフォーム用のポップオーバートリガー

デフォルト popover トリガーオプションはクリックです。しかし、ホバーに変更する必要があります。これは次のように実行できます。

$("#popover").popover({ trigger: "hover" });

しかし、これはスマートフォンには意味がありません。ユーザーは、ホバーによってトリガーされるポップオーバーを読み取ることができません。

私のサイトの「div」の部分には、「 visible-desktop "」または「hidden-desktop」を使用します。デスクトップの場合はホバーでポップオーバーをトリガーし、スマートフォン/タブレットの場合はクリックでポップオーバーをトリガーする良い方法を提供できますか？ （私はbootstrap 2.3.1）を使用します

関連： Make Bootstrap Popover Appear/Disappear on Hover not like Click

javascriptcsstwitter-bootstrappopover
19
trante

私の最善の提案は、タッチイベントがあるかどうかを検出することです。その場合（ホバリングの「いいえ」機能）、「クリック」を使用します...そうでない場合は、「ホバー」を使用します。これを試して：

var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
$("#popover").popover({
    trigger: is_touch_device ? "click" : "hover"
});

（タッチ検出はModernizrライブラリから取得されました）

JavaScriptを使用して「タッチスクリーン」デバイスを検出する最良の方法は何ですか？

Javascriptを使用したタッチスクリーンデバイスの検出

24
Ian

Bootstrap 3+にアップグレードできる場合は、次のよりクリーンなソリューションを使用できます。

$('[data-toggle="popover"]').popover({trigger: 'hover click'});

これは、デスクトップでホバーしてモバイルをクリックすると機能します。

参照： http://getbootstrap.com/javascript/#popovers -「複数のトリガーを渡すことができます。」

Bootstrap 2を使用する前に、これが可能かどうかはわかりません。受け入れられた回答は2013年のものでした。したがって、Bootstrapをバージョンにアップグレードできるかどうか、いつできるか） 3+、私はそれをこのようにリファクタリングします。

12
Greg Blass

Twitter bootstrap 3つのポップオーバーは今のところ混乱していることにも注意してください。一度に1つだけ開いて、他の場所をクリックして閉じることができるようにしたい場合は、頑張ってください-私githubページにはまだバグが残っています。

実稼働アプリに https://github.com/sandywalker/webui-popover を実装しましたが、うまく機能します。

4
Greg Blass