Disable Bootstrap tooltip on touchable devices (phones and tablets) | |
Автор: 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" }); } } |
Метки: | Tweet |
 Отправить на E-mail
 Версия для печати
|
