2

So, "hover" doesn't really exist on touchscreens. So what's the best option, a bit of javascript to give a small popup with an "x" in the corner to close it down?

I'd rather not have a mass of code to achieve this simple effect.

tckmn
  • 57,719
  • 27
  • 114
  • 156
Codemonkey
  • 4,455
  • 5
  • 44
  • 76

1 Answers1

0

Hover on touch devices is tricky. One option is to have a "long press" event trigger the tooltip/popup, in which case this will help.

Another, more low-tech option is to add a small icon next to every element that needs a hoverable. When the icon is clicked, the hoverable opens. The benefit to this option is that it's more accessible (providing the icon is not microscopic, of course).

Community
  • 1
  • 1
Chris Laplante
  • 29,338
  • 17
  • 103
  • 134
  • Why a long-press instead of a normal-press? What have I missed? – Codemonkey Oct 26 '13 at 23:36
  • There's no reason a single click wouldn't work (unless the text is already a link). From my experiences, long-press to show tooltips is more common. – Chris Laplante Oct 26 '13 at 23:38
  • Long-press seems like a usability issue. Some people wouldn't realise they had to long-press, and would only short-press, and wouldn't see any effect? In my case the text isn't also a hyperlink, that would be horribly messy, I'm glad I don't have to deal with that scenario. – Codemonkey Oct 26 '13 at 23:40
  • Here's one way of implementing option 2: http://jsfiddle.net/eJNbU/1/. Though as you say, you could also just do a simple click to open the dialog. – Chris Laplante Oct 26 '13 at 23:46