Question

I have a tooltip that activates(shows) when the target text is hovered over. For touch devices, the person can click the target text and the tooltip will display, then when they touch the TOOLTIP(not target text) the tooltip hides. But I want the person with the mouse to be able to select the text in the tooltip, the problem is that when they click on the tooltip, it hides, which is the functionality for the touch devices.

So, for computers(with a mouse) I want the tooltip to be able to be clicked without it hiding, but on touch devices I want the tooltip to hide when it’s clicked to make it easier for the user. Hope that makes sense.

What’s the best way to go about this? Is there a way for me to say “when touched, do this, but when clicked(with a mouse), do that”?

http://jsfiddle.net/nicktheandroid/fdWW5/4/

Answer 1

This is probably overkill, but these are some jQuery extensions I use to facilitate touch events across browsers:

jQuery.fn.touchstart = function (callback) {
this.each(function () {
var _self = jQuery(this);
var onTouchstart = function (ev) {
  if (ev.originalEvent) {
    if (ev.originalEvent.targetTouches) {
      AddTouchPropertiesToJQEventObject(ev);
      callback.call(this, ev);
    }
  }
};
_self.bind('touchstart', onTouchstart);
});
return this;
};

jQuery.fn.touchmove = function (callback) {
this.each(function () {
var _self = jQuery(this);
var onTouchMove = function (ev) {
  if (ev.originalEvent) {
    if (ev.originalEvent.targetTouches) {
      AddTouchPropertiesToJQEventObject(ev);
      callback.call(this, ev);
    }
  }
};
_self.bind('touchmove', onTouchMove);
});
return this;
};

jQuery.fn.touchend = function (callback) {
this.each(function () {
var _self = jQuery(this);
var onTouchEnd = function (ev) {
  var lastTouchMoveInfo = _self.data('lastTouchMoveInfo');
  ev = $.extend(ev, lastTouchMoveInfo);
  callback.call(this, ev);
};
var onTouchMove = function (ev) {
  var lastTouchMoveInfo = {
    pageX: ev.pageX,
    pageY: ev.pageY,
    touches: ev.touches
  };
  _self.data('lastTouchMoveInfo', lastTouchMoveInfo);
};
_self.touchstart(onTouchMove);
_self.touchmove(onTouchMove);
_self.bind('touchend', onTouchEnd);
});
return this;
};

var AddTouchPropertiesToJQEventObject = function (jqEventObject) {
  jqEventObject.pageX = jqEventObject.originalEvent.targetTouches[0].pageX;
  jqEventObject.pageY = jqEventObject.originalEvent.targetTouches[0].pageY;
  jqEventObject.rotation = jqEventObject.originalEvent.rotation;
  jqEventObject.scale = jqEventObject.originalEvent.scale;
  jqEventObject.targetTouches = jqEventObject.originalEvent.targetTouches;
  jqEventObject.touches = jqEventObject.originalEvent.touches;
};

Basically you want to bind to touchstart, touchmove, and touchend. Or maybe just touchstart for what you are doing.