Skip to content

Instantly share code, notes, and snippets.

@csasbach
Created March 13, 2011 00:34
Show Gist options
  • Save csasbach/867744 to your computer and use it in GitHub Desktop.
Save csasbach/867744 to your computer and use it in GitHub Desktop.
Create tooltips on mouseover or on click (for supporting touch interfaces).
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);
}
<!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>
/**
* 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();
});
});
@inforob
Copy link

inforob commented Jan 20, 2017

good job!

@bo28190
Copy link

bo28190 commented Jun 27, 2017

Hey, this worked a dream for me trying to find a tooltip that worked with mobile touch. Thanks!
One question: is it possible to work on one touch on mobile (touch devices). Currently it takes a double tap to show tooltip.

@rizaar
Copy link

rizaar commented Jul 24, 2017

Simple, easy to use, juste what i was looking for !
Many thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment