-
-
Save influxweb/1825df7b3c7b76a94e295661b702a4b8 to your computer and use it in GitHub Desktop.
Create tooltips on mouseover or on click (for supporting touch interfaces).
This file contains hidden or 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 hidden or 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 hidden or 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(); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment