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?
-
1prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices Here's a good article on "How to deal with :hover on touch screen devices" Worth a read– SimonTeoJan 3, 2017 at 6:19
Add a comment
|
3 Answers
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
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.
