web-dev-qa-db-ja.com

非表示Bootstrapメディアクエリを使用したモバイルのツールチップ

自分のサイトのボタンでブートストラップのツールチップを使用していますが、モバイルデバイスで表示すると、これらのツールチップは最初のクリックでトリガーされます。つまり、ボタンをダブルクリックする必要があります。これらがモバイルデバイスに表示されないようにしたいので、メディアクエリを使用して表示しようとしました。私のコードは：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
{
 .tooltip
 {
  display: none;
 }
}

これにより、ツールチップの表示が停止しますが、ボタンを機能させるために2回クリックする必要があります。メディアクエリを使用してこれらのツールチップが起動しないようにする方法はありますか？

twitter-bootstrapresponsive-design
28
natlines

私はそれを別の方法で達成しました。モバイルやその他のデバイスはtouchに対応しているので、タッチデバイスかどうかを確認しました。

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

次に、ツールチップをトリガーするのがtouch deviceではないかどうかを確認します。

if(isTouchDevice()===false) {
    $("[rel='tooltip']").tooltip();
}
25
Aamir Shahzad

ツールチップの位置はインラインでスタイル設定されるため、！importantフラグを使用するだけです。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .tooltip {
        display: none !important;
    }
 }
14
TotPeRo

ツールチップを有効にするには、$('#example').tooltip(options)などをコードのどこかに追加する必要があります。

これをモバイルデバイスで無効にするには、JavaScriptの window.matchMedia JavaScriptでメディアクエリを指定し、小さいデバイスのツールチップを有効にしない。

if (!window.matchMedia || (window.matchMedia("(max-width: 767px)").matches)) {

    // enable tooltips
    $('#example').tooltip();
}

MatchMediaは、モバイルSafari 5以降（他のブラウザーの中でも）でサポートされています。

12
spinningarrow

同じ問題が発生していて、解決策は https://groups.google.com/forum/#!topic/Twitter-bootstrap/Mc2C41QXdnI で見つかりました

matchMediaはIE（モバイルでは問題ではない）のサポートを欠いていますが、Android 2.2/2.3; http://caniuse.com/ matchmedia

Window.innerWidthを使用することも可能です。そして、次のような同じ値に対してそれをチェックします：

var isMobile;
var isTablet;
var isDesktop;

function detectScreen(){
    innerW = window.innerWidth;
        isDesktop = false;
        isTablet = false;
        isMobile = false;
        if(innerW >= 768 && innerW <= 979){
            isTablet = true;
        }else if(innerW > 979){
            isDesktop = true;
        }else{
            isMobile = true;
        }
        return innerW;
}

$(document).ready(function($) {
    detectScreen();

    $(window).resize(function() {
        detectScreen();
    });
}


そして、あなたは同じことをすることができます。
 
 if（！isMobile）{
 initTooltip（）; 
} 
 

 1 
Agey
最も簡単な方法は、ネイティブBootstrap class hidden-xsを追加することであり、ツールチップはモバイル画面に表示されません。
例：
<span title="Your Tooltip Text" data-toggle="tooltip" data-placement="right" aria-hidden="true" class="glyphicon glyphicon-info-sign hidden-xs"></span>
 0 
pdolinaj