Created
March 13, 2011 00:34
-
-
Save csasbach/867744 to your computer and use it in GitHub Desktop.
Create tooltips on mouseover or on click (for supporting touch interfaces).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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(); | |
| }); | |
| }); |
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.
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
good job!