Geek Answers Handbook

Qtip2 is disabled on mobile device

I am looking for a way to disable qtip2 hints when my site is viewed on a mobile device. In a desktop browser, tooltips appear when you hover, on a mobile device they appear when text input is touched (to which most of them are attached, through title = ""). I can only leave by touching somewhere else, and I doubt that the end user will see this before it annoys him.

Looking in the API and looking here in SO, a few solutions that I used do not work for me. Here is what I tried:

$('[title!=""]').qtip({// Grab elements with a title attribute that isn't blank.
        style: 'qtip-tipsy',
        position: {
             target: 'mouse', // Track the mouse as the positioning target
             adjust: { x: 5, y: 15 } // Offset it slightly from under the mouse
        }
    }); 

//check window size on page load. 
    if ($(window).width() < 960) {
    alert('Less than 960');
    //$('[title!=""]').qtip('hide').qtip('disable');
    $('[title!=""]').qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
}
else {
   //alert('More than 960');
}
});

, , 960, , , , . , craigsworks.com, hide disable ( , ), "destroy", "position" });

api , , , , . :

   var tooltips = $('[title!=""]').qtip({// Grab elements with a title attribute that isn't blank.
    style: 'qtip-tipsy',
    position: {
               target: 'mouse', // Track the mouse as the positioning target
               adjust: { x: -5, y: -15 } // Offset it slightly from under the mouse
          }
   }); 
    // Grab the first element in the tooltips array and access it qTip API
    var api = tooltips.qtip('api'); 
    //check window size on page load. 
        if ($(window).width() < 960) {
        alert('Less than 960');

    $tooltips.qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
}
else {
   //alert('More than 960');
}
});

( , , , / , : ). , , , , .

+4
2

, qtip, . 

<script type="text/javascript">
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
}else
{
$('[title!=""]').qtip({
     position: {
         target: 'mouse', // Track the mouse as the positioning target
         adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
     }
 })
}
});
</script>

, - qtip, , , qtip , . , . / javascript .

+2

init doc, / DOM. "", , " ", . CSS- :after content, ( ) , , , , content.

Gist: https://gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1

Fiddle: https://jsfiddle.net/Dhaupin/nw7qbdzx/.

, qtip2 init ( , , ), .

qtip. ;)

  • disable qtip: $('[data-hasqtip]').qtip('hide').qtip('disable');
  • qtip: $('[data-hasqtip]').qtip('enable');

<html>, ui_ //, , ..

0

More articles:


All Articles