Substitute Click for Hover on Touch Devices

C. Scott Asbach

0.00/5 (No votes)

24 Mar 2011GPL31 min read

14.1K

Alternative to hover events when we design our user experience

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.

HTML

<!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.

CSS

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.

JavaScript

/**
 * 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?

CodeProject

License

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