I am planning to use some kind of tooltip function. On desktop, I would like it to open with hover effect and also have a link and direct whenever user clicks. On touch devices, I would like to disable link and open tooltip only by touching(clicking whatever). So basically, I need to disable links for touch devices. It would be very useful to assign a CSS class for that.

Thanks for your help. Cheers.

I am planning to use some kind of tooltip function. On desktop, I would like it to open with hover effect and also have a link and direct whenever user clicks. On touch devices, I would like to disable link and open tooltip only by touching(clicking whatever). So basically, I need to disable links for touch devices. It would be very useful to assign a CSS class for that.

Thanks for your help. Cheers.

• javascript
• jquery
• css

• Could you use :hover because touch devices don't support it while non-mobile does? – David Corbin Commented Jan 22, 2014 at 23:39
• In the future, it's best to say what you've tried already. – rvighne Commented Jan 22, 2014 at 23:49

3 Answers 3

JavaScript:

if ('ontouchstart' in window) {
    $("a").click(function (e) {
        e.preventDefault();
        // trigger tooltip...
    });
}

Change the selector to something more restrictive if you don't want all <a>s to be targeted.

Also, it's better to use Modernizr for these things. If you're OK with including another library, it will do a good job. Here's a link to a custom build that only tests for touch event: http://modernizr./download/#-touch-teststyles-prefixes

And then replace the condition of the IF with Modernizr.touch.

I've used a JS approach where I set a data-* attribute on the first touch event and used event.preventDefault() to cancel the link action. If a second touch event was fired (i.e. the user touched a second time) I could now check if the data-* attribute was set and do nothing – that means the event handler returned true and the link action was performed. This is very mon when dealing with flyout-menus, where the first level items also link to some sort of subpage.

Another way to detect touch screens in JS is to use the MatchMedia API.

// target touchscreens of any viewport width
if(window.matchMedia("(hover: none) and (pointer: coarse)").matches) {
// target touchscreens of a specific width
// if(window.matchMedia("(hover: none) and (pointer: coarse) and (min-width: 1024px)").matches) {

  var links = document.querySelectorAll("a");

  for (var i = 0; i < links.length; i++) {

    var link = links[i];

    link.addEventListener("click", function(e) {
      e.preventDefault();
    }, false);

  }

}

// This obviously targets all links, so you'll need to be more specific than this.