1

A tiny disclaimer, not looking for tooltip alternative for mobile as in another UI Pattern, i'm looking for a different interaction that could trigger the tooltip, i hope this makes it clear.

The Question

There are many ui patterns that rely the hover event/selector, some patterns are informative some are interactive.

With mobile phones/tablets the hover effect is non-existing - so far at least 😉 - are there any techniques/tactics that can be used to tackle or workaround this problem?

Tooltips are a good example:

Tooltip Example

Image source: https://uxplanet.org/tooltips-in-ui-design-f63e117aa3d1

Before Answering

While you can, please avoid mobile-first sort of answers, as much as we like to stick to the bible of design, we know that in reality there are many cases out there that simply can't go mobile-first, could be that it's not a priority or simply adding the mobile aspect to an existing web design.

5
  • What is your question exactly? Your title asks about workarounds for tooltips, as does your example, but the first thing you say is you're not looking for alternatives for tooltips. I don't think there's a single, universal "Instead of Hover on Mobile, Do X" rule—I believe it's more addressed on a case-by-case basis (e.g. on mobile, include labels for these social media icons). Oct 10, 2018 at 15:51
  • @maxathousand i understand where you're coming from, the way i learned it a workaround isn't an alternative but instead a fix, how can we make tooltips work without having the hover trigger, i.e. workaround is finding a different way to trigger the tooltip, alternative could be finding another ui pattern that fulfills the tooltip purpose but is not a tooltip
    – UX Labs
    Oct 10, 2018 at 16:12
  • Okay, so you’re looking for a workaround, which would be “finding another way to trigger the tooltip”, right? To be clear, you still want tooltips, but just want another way to trigger them, right? Oct 10, 2018 at 16:16
  • which can include "finding...*** in case i'm not making myself clear i'm asking from an interaction point of view
    – UX Labs
    Oct 10, 2018 at 16:31
  • @maxathousand i hope the question edit makes it more clear
    – UX Labs
    Oct 10, 2018 at 16:35

3 Answers 3

4

This is one of the major reasons why tooltips are not a good solution most of the time.

My stock argument is that one shouldn't ever have to use tooltips. Either the information is important enough to show right on screen, or it's not important, meaning you don't even need to hide it in a tooltip.

You could use some of the more eccentric interactions such as the long tap-and-hold, but that's just hiding information in another layer of UX that the user probably doesn't actually need.

1
  • you've officially nailed it
    – UX Labs
    Oct 10, 2018 at 22:02
4

Both Android and iOS have long press handlers, which can be used to simulate the hover-tooltip effect. The Material Guidelines's mobile section give an example of usage.

2
  • thanks, though i'm more focused on the web responsiveness, long press could be interesting i'm not entirely sure if it works on the web as well, definitely worth experimenting with. ps the fox is epic
    – UX Labs
    Oct 10, 2018 at 16:16
  • The method for showing tooltips don't have to be mutually exclusive :) You can still show tooltips on hover.
    – mrchaarlie
    Oct 10, 2018 at 17:51
3

I think this is really about the discover-ability of UIs. Tooltips are often used as a way to annotate a user interface so that users can learn what all the functions do, without cluttering the UI with explanations.

The same affect can be achieved by consistent use of conventions such as standard function names and icons (in the example, the twitter icon doesn't need any annotation, if a user doesn't know what twitter is they are not going to have a twitter account).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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