How can I display tool tips on a touchscreen or is there a better way? [duplicate]

Question

On a PC with a mouse one would use the hover state. On touchscreens what's the best way to provide this kind of information?

Answer 1

I noticed that a Q&A was already held on whether to Tooltip or not to here: To tooltip or not to tooltip? So in all fairness, it may help to actually to answer the asker's question without further debate on whether or not to toll-tip.

-

I advocate two main solutions:

1. BY USING TOUCH & HOLD

This is a more natural interaction model. A lot of apps use this to reveal more information when you click. When a user long-presses (touches & holds) then show the tips. You can use media queries to detect when a user is on a touch enabled device then implement the solution.

Thanks to @Diodeus here https://stackoverflow.com/questions/2625210/long-press-in-javascript for this solution:

    var pressTimer;

    $("a").mouseup(function(){
      clearTimeout(pressTimer);
      // Clear timeout
      return false;
    }).mousedown(function(){
      // Set timeout
      pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
      return false; 
    });



.Element-Being-Pressed {
    -webkit-animation: 1s longpress;
            animation: 1s longpress;
}

@-webkit-keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

@keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

-

2. BY USING DOUBLE TAPS

By this principle, when a user taps once, the tips will appear, and when they tap twice, they will navigate to the destination of the link. This sounds complicated, especially if users are not informed of this behavioural pattern before-hand.

Thanks to @kevink from CSS Tricks for this. Replace the link moving to right with displaying your tool-tip instead.

You can superimpose the link that shows the tool tip over an identical-looking link that will go to the final destination In your code. If user is on a mouse-enabled device, the link that reveals the tip is shown by default. To make this work elegantly, you would need to have the links refresh after a few seconds so that the tips can appear once again.

http://jsfiddle.net/kevinkirchner/LuL5R/embedded/result/

<p class="parent">
    <a href="http://example.com">
        <span class="animate">Show my animation before leaving</span>
        <span class="double-tap"> </span>
    </a>
</p>



.parent { position: relative;}
.parent a { position: absolute;}
.parent .double-tap { display:none; }
.parent .double-tap { display:block; }
a .animate {
    display:block;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.3s ease-in-out 0.2s;
    -o-transition: -o-transform 0.3s ease-in-out 0.2s;
    -ms-transition: -ms-transform 0.3s ease-in-out 0.2s;
    transition: transform 0.3s ease-in-out 0.2s;
}
a:hover .animate {
    -webkit-transform: translateX(52px);
    -moz-transform: translateX(52px);
    -o-transform: translateX(52px);
    -ms-transform: translateX(52px);
    transform: translateX(52px);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    -ms-transition: -ms-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

Always remember that users may need visual cues in order for them to see that an area or link is actually something that can display tips.

-

USE HIGHLIGHTS WHEN PAGE LOADS THE FIRST TIME

Try highlighting hot spots in some way, then let those highlights fade out after a second or two.

-

USING HINTS / ICONS

By using hints like a tiny arrow or question mark you can make the user to see that touching on something could present a second state.

Here is are some sources for for further reading: What are some alternatives to "hover" on touch-based devices?

Answer 2

On touchscreens what's the best way to provide this kind of information?

Simple, don't hide it in a tool-tip.

If it is essential information, show it to users of all devices, all the time. If it isn't essential, don't show it.

If you think your design is not going to be usable by some users without giving them extra help, then maybe you should be looking again at your design. I'm of the belief that a tool-tip is basically an admission that you screwed up, and didn't make your form/app easy enough to use in the first place.

Answer 3

Back when lots of devices came with a thumb control at the bottom of the screen I used to advise that elements with 'hover' states should also have 'focus' states that perform exactly the same actions - this way, as a user scrolled through the screen with their thumb control, the hover states would be activated for each element they passed. This allowed us to alert the user to the presence of clickable buttons, links and tooltips.

Now, however, these controls are less common so we have to think more carefully about the way we design touch interfaces.

There are a few potential solutions including:

• Surface the hints/tooltips as visible text on the page - Don't hide the text in a tooltip but display in in the page as default alongside or under the field name.
• Add a 'hint' link - Add an icon (usually a question mark '?') near the field name so that a user can choose to look at the hint/tooltip by tapping the icon
• Contextual tap - add a long touch (tap and hold down) function that brings up any contextual controls associated with the relevant element that may include the hint/tooltip

As with most things in UX, I would advise testing with real users to determine the correct approach for this product.

Answer 4

First a Quote:

An interface that needs tool tips to be understandable needs to be redesigned, badly (cf. Jef Raskin: The Humane Interface).

Now to your question.

Tap on it
This is the main way to go. Tap on an Icon and show the additional Information.
Example

Problem
If the element with the tooltip provides another click action (e.g an anchor-link), this won't work.

tapping and holding
This is the way Google use a Tooltip in Material Design

A tooltip is triggered by tapping and holding an item. Keep the tooltip displayed as long as the user continues to hold the element.

This works fine with elements which already have a tab-action, linke a refresh-button in an app (example).
Example

Problem
If the element already has a Long-press-Action (like an anchor tag or Picture), the tooltip will be under the popup menu of the OS:

Conclusion
Tooltips on mobile are harder to use. So try to avoid them and design a UI which doesn't Need it. If you achieve this, the site is also better usable on Desktop.
If you can't (or won't) avoid a tooltip, Keep two things in mind when it Comes to decide which interaction you'll use:
is there already a Default action
avoid to Trigger a tooltip with a Default interaction (e.g tap on anchor-tag).
affordance
Will the user expect a tooltip or something else to happen? (e.g a dotted underline on a Label mostly indicates a tooltip or an other interaction which is not the Standard).

Answer 5

Go back to the interaction design to find a solution. There isn't a one-size-fits-all answer for showing tooltips on a touch screen, because tooltips are used for lots of different purposes. I think the answer to your question is going to be, examine the reason why you're using a tooltip on desktop, and design a different way that people can accomplish the same task on mobile.

For instance, if you're using tooltips to reveal the label of an icon-only button, there are several ways you could redesign that interaction for mobile; the most obvious (and simplistic) is to always show the labels of buttons in text. If you're using them to reveal "hint" text about a control or concept, then you could introduce another element (like the question mark that someone else mentioned) that, when tapped, reveals the hint text.

If you opt to use different touch gestures (e.g. long press) to activate the tooltips, remember that you may be overriding the browser's default behavior, which is a pretty risky move just for a tooltip (in my opinion).