What are the best practices for tooltips on mobile websites?
What are the best practices for tooltips on mobile websites? I'm designing the mobile version of a website for customers' accounts (where they can see their latest bill and settings for their accounts). The desktop site is filled with tooltips: to explain terms. For instance, on a page to edit customers' settings, there are tooltips for each setting (each setting can also be ticked). We also have customers' bill pages: accounting terms have tooltips.
We're considering tooltips (an 'i' icon next to each item, but each "i" will have to be quite small: not really usable), or a single tooltip button at the top or/and bottom of each page needing tooltip. Or a tooltip pinned to the bottom of the page.
I think we need to minimise the number of tooltips. In addition, I'm not sure what is the best practice, usability-wise, to present them on a mobile device.
How to display
I would not scatter your UI with i-icons or question marks. Instead, use a dotted underline to make it clear that the user can interact with the work but to set it apart from a link.
How to interact
Keep in mind that on cursor-devices the tooltip is hidden again on mouse-out. You can't do that on touch devices, so make sure the tooltips are hide-able by a double-click (first click opens the tooltip, second closes it). You can even add a nice message to explain this, as Zurb's Foundation Framework offers:
The project I'm working on has similar issues with progressive disclosure. Our website is littered with info icons that are suddenly useless in mobile. Although I like the dashed underline option, it does present the problem of how to dismiss the info bubble once read.
Think about how to expose more layers of information with the basic mobile gestures of swipe, tap or drag. See below:
Adding "i" next to each item will make your mobile interface ocean of "i". Applying tooltip directly on the text itself will not only save space but will be more usable too.
Recently checked working fine on android(Ice Cream Sandwich)
It seems like the web site is being simplistically ported from desktop to mobile. Each page should be entirely redesigned to let user fulfill the task on a mobile instead of making the desktop website work on the mobile.