Question

I’ve written a simple script that displays circles over an image.

1. When you hover over a circle it expands to a tooltip.

   $('div.tooltip').live({mouseenter:function(e){
   ... animate tooltip open;
   },mouseleave:function(e){
   ... animate tooltip closed;
   }});
   

2. When you click on the open tooltip it displays a lightbox with more information.

   $('div.tooltip').live('click',function(e){
   ... open related lightbox
   });
   

Everything works as it should, except on mobile devices. When I tap the circle to open the tooltip it fires the click event and completely bypasses the mouseenter/mouseexit events.
Any ideas would be greatly appreciated 🙂 Thanks

Answer 1

Because of the nature of touch screen devices they dont support hover events at all. The best you could do in this regard is use a jquery plugin that supports gestures and use the single-tap and double-tap events, otherwise you would need to place the tooltip somewhere else and make it visible always or have a separate button that solely activates the tip… or you could make it so the first click activates the press and then the next click activates the second function.