2

I'm experimenting with ways to have tooltips work across a variety of mobile devices. Unfortunately, the span of devices I need to support ranges from Nokias to iPhones.

Unfortunately, some of the browsers I'm dealing with don't support the use of the title attribute for tooltips on focus. As such, I need to come up with a different solution.

For starters, I'm playing with pure-css tooltips: http://psacake.com/web/jl.asp

This method uses the :hover pseudo class to position and set the z-index of a SPAN to create the tooltip.

On an iPhone, this produced an odd side effect. Tapping the link once exposes the tooltip require a second tap to actually activate the link.

However, applying a simple style to a different link's :hover pseudo-class (changing the background color) does not have the same effect. One tap triggers both the style and the link (you see the :hover style briefly before the next page loads).

I've solved this issue for mobile devices by switching to using the :focus pseudo-class which appears to not be triggered by the iPhone (and the Nokia touch device I am using). Of course, that's not ideal if this app were to be used on a desktop browser as well.

So...the question: Is there documented logic as to when the iPhone Safari browser decides to interrupt a click event on a link to expose the :hover pseudo-class vs. not interrupting and letting the link be triggered on the first tap?

DA.
  • 39,848
  • 49
  • 150
  • 213

1 Answers1

1

I was trying to find you a link in Apple's documentation, but the most specific I could find about :hover was that it is emulated and can cause unexpected results. I did find one place that said it is only shown if the user taps and holds the object. That page (near the bottom, "Don't Use Unsupported iOS Technologies") also says that normal tooltips (using the title attribute) would be shown when that happens also.

If you will accept an assumption as to why the behavior is different for changing the style and displaying a tooltip, I would guess that it is similar to the way mousemove events are handled. This Handling Events page says that, if the contents of the page change during a mousemove event, the rest of the events in the chain (including mouseup) are not sent. I am assuming that this behavior also applies to :hover. If you are using display: none to hide the tooltip, you could try using visibility: hidden instead as it is interpretted as "the object is still here, but you can't see it."

ughoavgfhw
  • 39,734
  • 6
  • 101
  • 123