title: Hiding Bootstrap Tooltips on Mobile using Media Queries
body: <p>I am using Bootstrap's Tooltips over buttons on my site but when viewed on a mobile device, these tooltips are triggered on the first click, meaning I have to double click on the button. I want to prevent these being shown on mobile devices and have tried using media queries to do so. My code has been:</p>
  
  <pre><code>@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  {
   .tooltip
   {
    display: none;
   }
  }
  </code></pre>
  
  <p>This stops the tooltip from displaying, but I still have to click twice to get the button to function. Is there any way I can prevent these tooltips from firing using media queries?</p>