I'm looking for a way to disable qtip2 tooltips when my site is viewed on a mobile device. In a desktop browser, the tooltips appear on hover, on mobile device they pop up when the text input is touched (which is what most of them are tied to, via the title=""). I can only make it go away by touching somewhere else, and I doubt the end-user would figure that out before being annoyed by it.
Looking into the API, and searching here at SO, the few solutions I've run across are not working for me. Here's what I've tried:
$('[title!=""]').qtip({// Grab elements with a title attribute that isn't blank.
style: 'qtip-tipsy',
position: {
target: 'mouse', // Track the mouse as the positioning target
adjust: { x: 5, y: 15 } // Offset it slightly from under the mouse
}
});
//check window size on page load.
if ($(window).width() < 960) {
alert('Less than 960');
//$('[title!=""]').qtip('hide').qtip('disable');
$('[title!=""]').qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
}
else {
//alert('More than 960');
}
});
While testing, the alert fires when I make my browser small than 960 and refresh so it seems to be reading that code correctly. I tried two methods I had read on craigsworks.com forums, first was using hide and disable (currently commented out in the example above while I tried the next), second was using 'destroy' I also tried adding the window-size code directly after the last curly brace of 'position' and before the ending });
Then I tried accessing the api directly, but I don't really know if I was doing it correctly and I can't find any examples that include all the needed code. Here's what I tried with that:
var tooltips = $('[title!=""]').qtip({// Grab elements with a title attribute that isn't blank.
style: 'qtip-tipsy',
position: {
target: 'mouse', // Track the mouse as the positioning target
adjust: { x: -5, y: -15 } // Offset it slightly from under the mouse
}
});
// Grab the first element in the tooltips array and access it's qTip API
var api = tooltips.qtip('api');
//check window size on page load.
if ($(window).width() < 960) {
alert('Less than 960');
$tooltips.qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
}
else {
//alert('More than 960');
}
});
I've been working on this for the past couple days (and still have other areas I can't get to work, like toggling the tool tips on/off with a button, but I'm focusing on one thing at a time). I'm hoping some of you who are better at coding can see where I'm going wrong.
Don't rely on an init or doc ready since that won't handle responsive/resizes or similar DOM changes. Instead, I recommend a "listener" that can check for what you need on the fly and make stuff available for other scripts to use. First Append CSS media queries
:afterbody usingcontent, then use a resize (or other) event to watch for it, then mitigate what needs to change based on what is found in currentcontent.Gist: https://gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1
Fiddle: https://jsfiddle.net/Dhaupin/nw7qbdzx/.
So basically, after normal qtip2 init, you can disable it's state without destruction (while allowing re-enable, if say, you plug in a monitor and mouse) using that listener.
You can find the following qtip states in those example links. They are wrapped in a function check in case disaster strikes ;)
$('[data-hasqtip]').qtip('hide').qtip('disable');$('[data-hasqtip]').qtip('enable');Since the listener is putting flags on
<html>tag, you also have the opportunity to watch forui_style attribs from/for/because other events, functions, etc.