Using abbr on Touch Devices
The situation with the :hover pseudo-class on touch devices is well documented and something that simply requires a different approach. The abbreviation HTML tag, however, is a different kettle of fish.
Simply putting the definition in brackets following the abbreviation is a possible solution (e.g. “HTML (HyperText Markup Language)”) but I’m a stickler for semantics and would prefer to use the tag built specifically for this task.
The solution I’ve come up with is probably as simple as solutions get but sometimes the best are.
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$('abbr').each(function() {
$(this).click(function() {
alert($(this).attr('title'));
});
});
}
Will sort you out nicely if you’re using jQuery or you can use this vanilla JavaScript:
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
var abbr = document.getElementsByTagName('abbr');
for(i = 0; i < abbr.length; i++) {
abbr[i].addEventListener('click', function() {
alert(this.getAttribute('title'));
}, false);
}
}
The code is pretty self explanatory but for those that don’t understand it, here goes: Firstly, we check that this is a handheld device - I only needed to detect iPhone and iPod touch but Hand Interactive have a nice post about detecting other mobile browsers - we then gather all abbr elements, loop through them alert out their title attribute.
