31

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

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

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

4

5 に答える 5

30

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

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

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

if(isTouchDevice()===false) {
    $("[rel='tooltip']").tooltip();
}
于 2014-07-09T07:29:01.437 に答える
16

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

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .tooltip {
        display: none !important;
    }
 }
于 2014-11-01T13:36:22.860 に答える
12

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

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

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

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

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

于 2013-01-08T08:41:16.770 に答える
1

私は同じ問題を経験していました.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();
    }
于 2013-08-22T09:52:11.537 に答える
0

最も簡単な方法は、ネイティブの Bootstrap クラスhidden-xsを追加することです。これにより、ツールチップがモバイル画面に表示されなくなります。

例： 

<span title="Your Tooltip Text" data-toggle="tooltip" data-placement="right" aria-hidden="true" class="glyphicon glyphicon-info-sign hidden-xs"></span>

于 2015-10-30T10:00:27.940 に答える