Click here to Skip to main content
14,297,581 members

Substitute Click for Hover on Touch Devices

Rate this:
0.00 (No votes)
Please Sign up or sign in to vote.
0.00 (No votes)
24 Mar 2011GPL3
Alternative to hover events when we design our user experience

touchhover

Fact

Hovering doesn’t work out so well on devices with a touch interface.

Prediction

A substantial portion, if not the majority of web browsing will be done with touch devices.

Conclusion

We need to create alternatives to hover events when we design our user experience.

A Solution

In this tutorial, I will show you a brief example of just such an alternative. In the example, we have an <abbr> with a tooltip. I use the <abbr> tag for two important reasons. First, in modern browsers, <abbr> tags will produce a browser tooltip by default anyway so we will have graceful degradation. Second, we leverage this by putting the text of the tooltip in the <abbr>‘s title attribute and this allows us to use jQuery to grab this text and use it for the content of our custom tooltip.

The Code

The HTML

Just a simple document with an abbreviation that has a tooltip.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="tooltip.css" />
</head>
<body>
    <p>For a tooltip hover or 
       click <abbr title="This text will show up in your tooltip!">here</abbr>.</p>
    <script type='text/javascript' 

     src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>
    <script type='text/javascript' src='touchHover.js'></script>
</body>
</html>

The CSS

Styles for the abbreviation and the tooltip.

abbr
{
        border-bottom: 1px dotted #666;
        cursor: help;
}

.tooltip
{
	position:absolute;
	background-color:#eeeefe;
	border: 1px solid #aaaaca;
	font-size: smaller;
	padding:4px;
	width: 160px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

The JS

Here’s what the example is all about. We get rid of the browsers tooltip and make our own. Then, we make a clickable tooltip that fades out after a short delay.

/**
 * touchHover.js
 *
 * Create tooltips on mouseover or on click (for supporting touch interfaces).
 *
 * @author C. Scott Asbach
 */

$(document).ready(function() {	

	/**
	 * store the value of and then remove the title attributes from the
	 * abbreviations (thus removing the default tooltip functionality of
     * the abbreviations)
	 */
	$('abbr').each(function(){		

		$(this).data('title',$(this).attr('title'));
		$(this).removeAttr('title');
	});

    /**
	 * when abbreviations are mouseover-ed show a tooltip with the data from the title attribute
	 */
	$('abbr').mouseover(function() {		

		// first remove all existing abbreviation tooltips
		$('abbr').next('.tooltip').remove();

		// create the tooltip
		$(this).after('<span class="tooltip">' + $(this).data('title') + '</span>');

		// position the tooltip 4 pixels above and 4 pixels to the left of the abbreviation
		var left = $(this).position().left + $(this).width() + 4;
		var top = $(this).position().top - 4;
		$(this).next().css('left',left);
		$(this).next().css('top',top);
	});

    /**
	 * when abbreviations are clicked trigger their mouseover event then fade the tooltip
	 * (this is friendly to touch interfaces)
	 */
	$('abbr').click(function(){

		$(this).mouseover();

		// after a slight 2 second fade, fade out the tooltip for 1 second
		$(this).next().animate({opacity: 0.9},{duration: 2000, complete: function(){
			$(this).fadeOut(1000);
		}});
	});

	/**
	 * Remove the tooltip on abbreviation mouseout
	 */
	$('abbr').mouseout(function(){

		$(this).next('.tooltip').remove();
	});	
});

Happy Clicking!

There you have it. While this is a basic example, with a little imagination, you could apply similar techniques to all of your essential interactions that are currently dependent on hovers.

Got the Gist?

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Share

About the Author

C. Scott Asbach
Web Developer piddmedia
United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
Technical Blog
Posted 24 Mar 2011

Tagged as

Stats

11.8K views
2 bookmarked