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" });
МеткиМетки:  bootstrap, html, javascript

Отправить на E-mailОтправить на E-mail   Версия для печатиВерсия для печати

Пока комментариев нет… Будьте первым кто оставит комментарий по этой теме!

Вы можете войти с помощью:
Войти с Facebook Войти с ВКонтакте