No replies
Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 9 years 15 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Hi folks, 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 Test Site 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