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?
Joe Vaughn for Congress
Twenty Till Noon
Substitute Click for Hover on Touch Devices