20

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

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

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

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

関連: クリックではなくホバー時に Bootstrap ポップオーバーを表示/非表示にする

4

3 に答える 3

26

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

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

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

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

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

于 2013-03-28T20:10:23.453 に答える
5

また、現在、Twitter ブートストラップ 3 のポップオーバーが混乱していることにも注意してください。一度に 1 つだけ開いて、他の場所をクリックして閉じることができるようにしたい場合は、幸運を祈ります。彼らの github ページにはまだ未解決のバグがあります。

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

編集 (2020 年 4 月): ツールチップ/ポップオーバー スペースにチャンピオンが登場しました: Tippy.js ( https://atomics.github.io/tippyjs/ )。他のものを使用する理由はありません。この素晴らしいライブラリを担当する開発者に乾杯!

于 2016-05-13T18:06:09.730 に答える