55

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.

Improve this question
2
  • Why do the icons need to be small? Why not redesign to leave more space for them?
    – Justin
    Mar 4, 2013 at 1:57
  • It seems a shame that there is a standard way to display toolstips but mobile browsers haven't found a way to use it without non-standard workarounds to re-implement the same functionality.
    – Michael
    Jun 17, 2018 at 19:13

6 Answers 6

Reset to default
25

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

Improve this answer
5

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)

Improve this answer
5

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

Improve this answer
2
  • 1
    do you have a working example of this somewhere? I'd like to see it working.
    – Jacques
    Sep 21, 2015 at 14:41
  • Hmm, screens give the impression that they are separate items when really, they are the same. The second screen is just the editable version of the first screen.
    – J Bo
    Dec 13, 2017 at 20:27
0

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: https://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.

Improve this answer
0

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.

Improve this answer
1
  • Even so, how should tooltips be rendered on a mobile device?
    – emragins
    May 30, 2018 at 14:10
0

I am having this same issue. Is it explicitly known by the user to touch a tooltip to close it on mobile?
See how this site treats it here in the image.

I do like the idea of a dashed underline also, which has been mentioned here with examples.

screenshot

Improve this answer

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