6

I've implemented the bootstrap tooltips on a web site and they work fine on a desktop screen. But they are proving problematic for smaller devices. Clicking on a link on a small screen device without hover functionality just brings up the tooltip instead of clicking through to the link destination. Is there a way to turn off or disable tooltips for smaller devices, perhaps using some kind of check in the jquery code?

Bob Foster
  • 210
  • 2
  • 8

3 Answers3

12

You could do a check for touch events before calling the init on bootstrap tooltip. This will allow you to disable the tooltip feature for most touch devices not just smaller screen size touch devices like mobiles.

if(!('ontouchstart' in window))
{
  $('#example').tooltip(options); // <-- Example code from Bootstrap docs
}
Kyle Needham
  • 3,379
  • 2
  • 24
  • 38
  • Thanks, yes, touch devices are likely more the key factor here, not just screen size. I've not tested on an iPad but likely, even on a large pixel width screen, the problem would persist there as well. – Bob Foster Apr 13 '14 at 22:46
  • can you provide more info about the 3 'nots' '!' in your if statement? Is ontouchstart part of jquery or javascript itself? I'm trying to determine if ontouchstart would be available on all devices. – Bob Foster Apr 13 '14 at 22:49
  • @BobFoster Sorry that was just a typo, this method is supported in all modern browsers but if you want almost complete support check out [modernizr](http://modernizr.com/). – Kyle Needham Apr 14 '14 at 08:49
  • This isn't working on chrome for me (ie: this turns off hover triggered tooltips in Chrome browser on a desktop). Anyone else? – theyuv Oct 08 '16 at 11:04
  • 1
    Does this work on computers with touch screens and a mouse? If the user hovers the mouse on the element even though their monitor is a touch screen the hover should show. – Lee Aug 11 '20 at 13:59
2

Here is a solution without the need for any scripting:

First add a custom class on the tooltip:

<button data-bs-toggle="tooltip" data-bs-custom-class="my-class" title="Hide me on small screens">
    tooltip text
</button>

Then add a media rule for this class:

@media (max-width: 992px) {
    .my-class {
        display: none;
    }
}
Jesper Wilfing
  • 11,157
  • 5
  • 29
  • 32
1

Maybe something like this:

if ( $(window).width() < 780 ){
    $('#element').tooltip('destroy');
}
Miljan Puzović
  • 5,840
  • 1
  • 24
  • 30
  • thanks, this is likely the code we should use but the test used in the if statement is something I'm still thinking about. – Bob Foster Apr 13 '14 at 22:50