<h3>Test me in mobile!</h3>
<p>Tap the image to see the :hover effect. Tap anywhere else inside this iframe to un-hover.</p>
<span class="container">
  <img src="http://www.mightyminnow.com/wp-content/uploads/2013/06/tech_tip_icon.jpg" />
  <span class="details">Details go here</span>
</span>

.container {
  position: relative;
}

.container .details {
  display: inline-block;
  position: absolute;
	top: 100%;
	padding: 10px 15px;
	z-index: 1; 
	display: none;
	width: 200px;
	background: #222;
	color: #FFF;
}

.container:hover .details,
.container .details:hover {
	display: block;	
}


/* jQuery enabled behavior for mobile */
.touch .container.no-hover .details {
	display: none !important;	
}

// Add no-touch class to body for mobile touch events and toggle hover class on elements that need it
	if ("ontouchstart" in document.documentElement) {
		document.documentElement.className += " touch";
	}
	
	// Add and remove no-hover class to <li>'s for mobile hover events
	jQuery('.touch .container').each(function() {
		var div = jQuery(this);
		
		div.hover(function() {
			div.removeClass('no-hover');
		});
		
		jQuery('*').not(div).bind('click', function() {
			div.addClass('no-hover');
		});
		
	});