Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Why do the icons need to be small? Why not redesign to leave more space for them? –  Justin Mar 4 '13 at 1:57

5 Answers 5

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:

Example of tooltip on a touch screen device

share|improve this answer

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.

Demo link - http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/

Recently checked working fine on android(Ice Cream Sandwich)

share|improve this answer

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:

enter image description here

enter image description here

share|improve this answer

It depends on the size of the icons, for example, if these are LARGE buttons, and the user is going to be using the site in a linear (left to right or top to bottom), you can implement something similar to the about page of stackexchange (see: http://ux.stackexchange.com/about) where as the user scrolls down tips come up, another method would be to implement something like youtube did with it's new "guide" button, the first time the user visits the site they go through a javascript-guided tutorial with message bubbles next to buttons and then they click Okay, got it, and it doesn't appear again. More clarification about the website, the size, the users, etc, would be greatly helpful, and would allow me to improve my answer, and go further in-depth.

share|improve this answer

I think tooltips, which generally require mouse/pointer hover-over interactions, is not particularly practical or effective on mobile websites. The way you plan to implement the 'i' icons will also introduce other complications.

If the purpose of the tooltips is to explain terms primarily, I would consider making the form easier to understand and fill out for the users (if that's the problem/issue), otherwise why not try putting the tips in the input field themselves, or provide inline help when users enter wrong information (they could be smarter than you think as well)?

More details would definitely be help.

share|improve this answer
    
Hi thks for the reply. This is an Account website, not just a form: a website where users login as customers and can view their bill (terms used in the bill currently rely on tooltips), make a payment (using a form), change settings (using short forms with tick boxes), view offers, change their contact details, track their orders etc. I agree with your idea of providing inline help, however, when every term in a long list of tick boxes relies on a tooltip, it'd make the list very long. I do not like the idea of filling out forms for users as it is sometimes confusing & leads to errors. –  Sophie Lepinoy Apr 2 '13 at 13:20

protected by Community May 2 at 22:51

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.