title: What determines what iPhone (mobile safari) will do with a css :hover pseudo-class?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>For starters, I'm playing with pure-css tooltips: <a href="http://psacake.com/web/jl.asp" rel="nofollow">http://psacake.com/web/jl.asp</a></p>
  
  <p>This method uses the :hover pseudo class to position and set the z-index of a SPAN to create the tooltip.</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>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?</p>