Substitute Click for Hover on Touch Devices
0/5 (0 vote)
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.
<!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.