Hiding Bootstrap Tooltips on Mobile using Media Queries

Question

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:

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

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?

Answer 1

I have achieved it differently; Mobile and other devices are touch enabled, so I checked if it's touch device or not.

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

Now, check if it's not a touch device to trigger the tool-tip:

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

Answer 2

Just use the !important flag since the tooltip position is styled inline.

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