We have a hover state on the web which shows a small info on hover. How do I show the small info on mobile while on mobile view, there is no hover state? enter image description here


3 Answers 3

  • Popover: If the information is some kind of dialog you could display it on tap.

  • Tooltip: If the information is a Tooltip you could display it on Press and Hold.

Example of Touch UI tooltips in a press and hold state

Material design - Tooltips Mobile


Hover state on mobile is not an good idea. If there is any info which is important, then make it clickable on mobile and show the information. In your case what I am assuming is that small "i" icon show information on hover on desktop and you want to retain that icon on mobile. I will strongly suggest to make it clickable on mobile because hover state will not be successful on mobile as the user finger will interrupt while reading the info.


Make the i static and clickacle, if the item has additional information tagged to it, hover isn't available in a touch environment.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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