Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,436
    Thanks
    11
    Thanked 304 Times in 303 Posts

    Tooltip and :hover on mobile devices

    I'm not a mobile kind of guy, so I don't have a tablet or phone to test these things on...

    I'm curious as to how folks are handling tooltips (title="blah"), css :hover actions, or other JS pop-up boxes that are based on hovering. Many existing sites use these as handy ways to display localized information, so they're a common user interface function at this point. My understanding (please correct me if I'm wrong) is that on a mobile device these are somehow turned into a tap/click situation, where you tap on the area of interest, it brings up the box of info, and you tap again to dismiss it. Sounds fine if the user knows to tap in the right place?

    Is this a correct description of the functionality of all the various methods, or do some of these work differently or not at all on mobiles?
    What are your thoughts going forward, is this solution not workable on mobile devices, and is there a preferred alternative?

    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    First of all, you need to differentiate between mobile devices and touch devices. Both are not necessarily the same, and there are (or might be in future) desktop devices that can have touch functionality, too. And I’ve seen keyboards added to iPads so I’m sure you can also add a mouse kind of interface to a tablet in case you are sitting on a desk or whatever. So, the distinction between mobile and static/desktop and touch and mouse pointer is pretty blurry.

    That said, simply spoken, there is no hover behavior on touch devices. You either touch the screen or you don’t. However, to make things complicated, some touch-device browsers are respecting CSS hover pseudo-classes to allow for a similar user experience on sites that aren’t mobile friendly (i. e. kind of a backwards compatibility thing). You shouldn’t rely on it, though, and the best is to make elements that react to hover/mouseover on classic devices react to touch using touch events on respective devices and to provide some visual clue (e. g. a little “plus” icon or something that indicates that touching the element is going to bring up additional info).

    You can’t create touch-friendly sites without actually testing on touch devices, though, unless you are really experienced (like, after a few years of dealing with IE 6 I knew from mind what worked and what didn’t, and therefore didn’t have to check every little code in IE 6).
    Last edited by VIPStephan; 07-16-2014 at 08:12 PM.

  • Users who have thanked VIPStephan for this post:

    tracknut (07-16-2014)

  • #3
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,538
    Thanks
    8
    Thanked 1,093 Times in 1,084 Posts
    I agree. It's confusing and difficult to script without having the devices physically on hand. Online emulators don't work.

    I'm not sure if there is a way to handle all devices with one script.
    Everything I've seen gravitates to JQuery.

    I found this method for touch screens (no pointing devices):
    Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis

    Perhaps the best way is to not need tooltips? Design the website so the content is clear to the user, they won't need a tooltip.

  • Users who have thanked mlseim for this post:

    tracknut (07-16-2014)

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,436
    Thanks
    11
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by VIPStephan View Post
    First of all, you need to differentiate between mobile devices and touch devices. Both are not necessarily the same, and there are (or might be in future) desktop devices that can have touch functionality, too. And I’ve seen keyboards added to iPads so I’m sure you can also add a mouse kind of interface to a tablet in case you are sitting on a desk or whatever. So, the distinction between mobile and static/desktop and touch and mouse pointer is pretty blurry.
    Gotcha, I need to differentiate between them, but the difference is blurry. Right on it

    ...the best is to make elements that react to hover/mouseover on classic devices react to touch using touch events on respective devices and to provide some visual clue (e. g. a little “plus” icon or something that indicates that touching the element is going to bring up additional info).
    Gotcha, sounds like a decent plan. So how are you differentiating between these types of devices in your coding? Some sort of JS thing based on the user agent string?

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,436
    Thanks
    11
    Thanked 304 Times in 303 Posts
    Quote Originally Posted by mlseim View Post
    I found this method for touch screens (no pointing devices):
    Responsive and Mobile-Friendly Tooltip — Osvaldas Valutis
    That's a nicely packaged solution, thanks. I wonder how it distinguishes a touch device from a mouse device.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by tracknut View Post
    Gotcha, I need to differentiate between them, but the difference is blurry. Right on it
    What I meant was that there is a difference in thinking about this. “Mobile” is not necessarily equal to “touch” and “mouse pointer” isn’t necessarily equal to “desktop”.

  • #7
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is it free on mobile?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •