Disable Bootstrap tooltip on touchable devices (phones and tablets)

Here is the code snippet which demonstrates how to disable Bootstrap tooltip (Popper) on touchable devices (on phones and tablets).

First of all let’s detect touchable device and save detection in global JavaScript variable...

var is_touch_device = false;
window.addEventListener("touchstart", function() {
  is_touch_device = 1;

  if (typeof $!="undefined" && typeof Popper!="undefined") {

Take attention on the .tooltip-no-tap class. This class does not exists in our CSS (it doesn't change an appearance of element), but the code above disables all Popper-based tooltips from all HTML elements with the .tooltip-no-tap class, upon detection of “tapable” device.

Also you may want to exclude initialization of Popper-based tooltip for contriks with .tooltip-no-tab class, if touch device was already detected:

// Initialize Tooltips...
if (is_touch_device) { // if touch device already detected -- exclude controls with “.tooltip-no-tap” class.
  $(scope).find('[data-toggle="tooltip"]').not(".tooltip-no-tap").tooltip({ trigger: "hover" });
    $(scope).find("acronym, abbr").not(".tooltip-no-tap").tooltip({ trigger: "focus hover" });
  }else {
    $(scope).find('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
    $(scope).find("acronym, abbr").tooltip({ trigger: "focus hover" });

Send by E-mailSend by E-mail   Print versionPrint version

No comments yet… Be the first to leave comment on this topic!

You may sign in using:
Enter with Facebook Enter with Google Enter with VK