Home/ Questions/Q 4548714
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T16:15:35+00:00

I’m designing a site (a customer portal) that will probably be used with mobile/touchscreen

  • 0

I’m designing a site (a customer portal) that will probably be used with mobile/touchscreen devices at some point in the future. In the past I’ve used CSS code like this:

div.Info
{
    display: inline;
    position: relative;
    text-decoration: none;
}

div.Info span.InfoDetail
{
    display: none;
}

div.Info:hover span.InfoDetail
{
    padding: 3px;
    display: block;
    position: absolute;
    top: 1em; left: 1em;
    border: 3px inset Gray;
    background-color: White; color: #000;
    text-align: left;
    white-space: nowrap;
    z-index: 25;
}

to create little CSS popups that display on mouseover and they seem to work very well. However I’m conscious that this may or may not work on touchscreens so I was wondering what the “correct” behaviour was as there doesn’t seem to be much consistency that I’ve found across the limited amount of mobile browsers I’ve been able to look at. I had looked about a bit and it seems that this hover event may activate if the object gains focus, so I created some test code at http://mad-halfling.webs.com/testcode.htm that displays a small popup if you mouse over the “Mouse over for detail” text or the little up-arrow image:-

  • on iOS (I found a demo iPad in a shop to test it) this doesn’t seem to work (I only tried the text as I have only just added the image)
  • on MicroB on my N900, tapping the text and image both bring up the popup, fine
  • on Firefox (I believe it’s Fennec) on my N900 tapping on either does nothing

What’s your take on this – it seems a shame as it’s such a useful way of making popups without having to resort to javascript, but if it won’t work with touch-screens going forward I’m going to have to rethink my strategy

Cheers

MH

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The fundamental problem with mouseover, including when it is used for desktop websites, is that there is no UI indication of a behavior.

    This isn’t a definitive answer but I’ve noticed that in places where you would be using “mouseover” now on a mobile device you can use “long touch”. The problem though is that nothing on the UI indicates that behavior. (To be fair UI conventions that have no indication have been around for a while, like double clicking).

    The rule of thumb probably should still be that just like mouseovers, critical functionality shouldn’t require them.

    • 0