mobile - Twitter ブートストラップポップオーバー/ツールチップのバグはモバイルですか?

Question

私は Twitter Bootstrap を使用していますが、iPad と iPhone でテストするときに修正できない問題に遭遇しました。モバイル (少なくともこれらのデバイス) では、クリックしてヒントまたはポップオーバーを有効にする必要があります (予想どおり)。問題は、一度閉じると決して閉じられないことです。もう一度クリックすると閉じるリスナーを追加しましたが、デフォルトの動作ではクリックして削除しないとは信じがたいです。これは Bootstrap のポップオーバーとツールチップのバグですか?? 私のコードは以下のとおりです - 動作しているように見えますが、ヒントまたはポップオーバーを作成したのと同じアイテムをクリックした場合にのみ - ページのどこにもありません (それを動作させることができませんでした)。

実行するコード:

$(function () {
    //Remove the title bar (adjust the template)
    $(".Example").popover({ 
        offset: 10,
        animate: false,
        html: true,
        placement: 'top',
        template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
        //<h3 class="popover-title"></h3>
        //Need to have this click check since the tooltip will not close on mobile
        }).click(function(e) {
            jQuery(document).one("click", function() {
                $('.Example').popover('hide')
        });   
    });
});

HTML:

<a href="javascript:void(0);" class="Example" rel="popover" data-content="This is the Data Content" data-original-title="This is the title (hidden in this example)">

前もって感謝します！

デニス

score 8 · Accepted Answer

私は、stackoverflow やその他のさまざまな Web コーナーに投稿された数十のソリューションを試しましたが、うまくいったのは次の 1 つだけです。

説明

hereに記載されているように、タッチデバイスでクリック可能にするために要素に CSS ディレクティブを適用できます。なぜそれが機能するのか、そこで何が起こっているのかはわかりませんが、そのようです。そこで、ドキュメント全体をモバイルデバイスでクリックできるようにしたいと考えていbodyます。これにより、どこにでも触れてポップオーバーを閉じることができます。

ポップオーバー JS

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

方向

1.Modernizr をインストールする

私はレールを使用しているので、gemを使用しました。

gem 'modernizr-rails'

`touch`2.css ディレクティブでクラスを作成する

以下を CSS に追加します。

.touch {
  cursor: pointer
}

3. タッチデバイスのみで、`touch`クラスを`body`

全体ではなく、他の要素をクリック可能にする場合は、それらにクラスをbody追加します。touch

if (Modernizr.touch) {
  $( "body" ).addClass( "touch" );
}

それでおしまい！これで、デスクトップでポップオーバーを通常どおり使用でき (ホバートリガーを使用しても)、モバイルではタッチで閉じることができます。

score 4 · Accepted Answer

私のiPadでも同じ問題がありました。しかし、ブラウザでは正常に動作します。私にとっての解決策は、ツールチップを非表示にできるすべての可能な要素のリスナーを追加することでした:

$('*').bind('touchend', function(e){
   if ($(e.target).attr('rel') !== 'tooltip' && ($('div.tooltip.in').length > 0)){
     $('[rel=tooltip]').mouseleave();
     e.stopPropagation();
   } else {
     $(e.target).mouseenter();
   }
});

はい、すべてのツールチップに対してイベントを送信するのはわずかなオーバーヘッドですが、どの要素のツールチップが表示されているかを定義することはできません。

score 2 · Accepted Answer

主なコンセプトは、モバイルデバイスで手動でポップオーバーを作成することです

$(document).ready(function() {
    if ('ontouchstart' in window) {
        $('[data-toggle="popover"]').popover({
            'trigger': 'manual'
        });            
    }
});

score 1 · Accepted Answer

動作させるには、次のコードスニペットを参照してください。

$('[data-toggle="popover"]').popover();

$('body').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
  });
});

これは、本文のクリックを検出し、ページ上のすべてのツールチップを閉じる最も簡単な方法です。

ここで実際の例を確認できます

score 1 · Accepted Answer

このjsfiddleでのソリューション、iOS (iPad および iPhone)、Android および Windows でのテスト。

$(document).ready(function(){

    var toolOptions;
    var toolOptions2;
    var isOS = /iPad|iPhone|iPod/.test(navigator.platform);
    var isAndroid = /(android)/i.test(navigator.userAgent);

    ///////////////////////////////////////// if OS
    if (isOS){

        toolOptions = {
            animation: false,
            placement:"bottom",
            container:"body"
        };
        $('.customtooltip').tooltip(toolOptions);

        $('.customtooltip').css( 'cursor', 'pointer' );
         $('body').on("touchstart", function(e){
            $(".customtooltip").each(function () {
                // hide any open tooltips when the anywhere else in the body is clicked
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.tooltip').has(e.target).length === 0) {
                    $(this).tooltip('hide');
                }////end if
            });
        });

    ///////////////////////////////////////// if Android
    } else if(isAndroid){
        toolOptions = {
            animation: false,
            placement:"bottom",
            container:"body"
        };
        toolOptions2 = {
            animation: false,
            placement:"left",
            container:"body"
        };
        $('.c_tool1').tooltip(toolOptions);
        $('.c_tool2').tooltip(toolOptions);
        $('.c_tool3').tooltip(toolOptions2);

    ///////////////////////////////////////// if another system
    } else {
        toolOptions = {
            animation: true,
            placement:"bottom",
            container:"body"
        };
        $('.customtooltip').tooltip(toolOptions);

    }//end if system

    document.getElementById("demo").innerHTML = "Sys: "+navigator.platform+" - isOS: "+isOS+" - isAndroid: "+isAndroid;

});

<h6>
    first <a href="#!" title="" class="customtooltip c_tool1" data-original-title="data del toolltip numero 1">tooltip</a> 
    Second <a href="#!" title="" class="customtooltip c_tool2" data-original-title="data del toolltip numero 2">tooltip</a> 
    third <a href="#!" title="" class="customtooltip c_tool3" data-original-title="data del toolltip numero 3">tooltip</a>
</h6>

<p id="demo"></p>

score 1 · Accepted Answer

Bootstap-tooltip v3.3.7

実際:ホバー時のツールチップは、プロジェクトのタッチデバイスでは機能しません

解決策: tooltip のshowイベントをサブスクライブし、 mouseenterを呼び出します。

$body = $('body');

$body.tooltip({selector: '.js-tooltip'});

// fix for touch device.
if (Modernizr.touch) { // to detect you can use https://modernizr.com
  var hideTooltip = function(e) {
    tooltipClicked = !!$(e.target).closest('.tooltip').length;
    if (tooltipClicked) { return; }

    $('.js-tooltip').tooltip('hide');
  }
  var emulateClickOnTooltip = function(e) {
    tooltipsVisible = !!$('.tooltip.in').length;
    if (tooltipsVisible) { return; }

    $(e.target).mouseenter();
  }
  var onTooltipShow = function(e) {
    tooltipClicked = !!$(e.target).closest('.tooltip').length;
    if (tooltipClicked) { return; }

    $body.on('touchend', hideTooltip); 
  }
  var onTooltipHide = function() {
    $body.off('touchend', hideTooltip);
  }

  $body
    .on('touchend', '.js-tooltip', emulateClickOnTooltip)
    .on('show.bs.tooltip', onTooltipShow)
    .on('hide.bs.tooltip', onTooltipHide);
}

mobile - Twitter ブートストラップ ポップオーバー/ツールチップのバグはモバイルですか?

6 に答える 6

説明

ポップオーバー JS

方向

1.Modernizr をインストールする

touch2.css ディレクティブでクラスを作成する

3. タッチ デバイスのみで、touchクラスをbody

Related

Reference

mobile - Twitter ブートストラップポップオーバー/ツールチップのバグはモバイルですか?

`touch`2.css ディレクティブでクラスを作成する

3. タッチデバイスのみで、`touch`クラスを`body`