Disable Bootstrap tooltip on touchable devices (phones and tablets)

Disable Bootstrap tooltip on touchable devices (phones and tablets)	\|
	Субота, 16 березня 2019 р.

Автор: utilmind

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") {
    $(".tooltip-no-tap").tooltip("disable");
  }
});

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" });
  }
}