<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>
.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() {
		jQuery('*').not(div).bind('click', function() {
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.