title: qtip2 disable on mobile device
body: <p>I'm looking for a way to disable qtip2 tooltips when my site is viewed on a mobile device. 
  In a desktop browser, the tooltips appear on hover, on mobile device they pop up when the text input is touched (which is what most of them are tied to, via the title=""). I can only make it go away by touching somewhere else, and I doubt the end-user would figure that out before being annoyed by it.</p>
  
  <p>Looking into the API, and searching here at SO, the few solutions I've run across are not working for me.
  Here's what I've tried:</p>
  
  <pre><code>$('[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() &lt; 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');
  }
  });
  </code></pre>
  
  <p>While testing, the alert fires when I make my browser small than 960 and refresh so it seems to be reading that code correctly.
  I tried two methods I had read on craigsworks.com forums, first was using hide and disable (currently commented out in the example above while I tried the next), second was using 'destroy'
  I also tried adding the window-size code directly after the last curly brace of 'position' and before the ending });</p>
  
  <p>Then I tried accessing the api directly, but I don't really know if I was doing it correctly and I can't find any examples that include all the needed code.
  Here's what I tried with that:</p>
  
  <pre><code>   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's qTip API
      var api = tooltips.qtip('api'); 
      //check window size on page load. 
          if ($(window).width() &lt; 960) {
          alert('Less than 960');
  
      $tooltips.qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
  }
  else {
     //alert('More than 960');
  }
  });
  </code></pre>
  
  <p>I've been working on this for the past couple days (and still have other areas I can't get to work, like toggling the tool tips on/off with a button, but I'm focusing on one thing at a time). I'm hoping some of you who are better at coding can see where I'm going wrong.</p>