|
Project Information
|
littleTIPIntrodutionlittleTIP is a common graphical user interface element, used to provide extra information when a user hovers the mouse cursor over it. Can be used on any html element with the title attribute. Simple and efficient so there's no need to use extra markup. VantageslittleTIP was developed with the perspective of being an infotip that provides extra information in a simple and effective way, for easy implementation and configuration. Currently some vantages in using littleTIP are:
ApplicationFirst include CSS style for littleTIP customization and the javascript files of jQuery and littleTIP. Finally add the desired information in the html title attributes. Where is not required the plugin attendance just don't include the information in title attributes. You're done! There's nothing else to the simple littleTIP work. <!DOCTYPE HTML> <html> <head> <title>littleTIP - jQuery Plugin</title> <link href='littletip.css' media='screen' rel='stylesheet'/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://littletip.googlecode.com/svn/trunk/littletip-latest.js"></script> </head> <body> <a href="http://www.google.com" title="This is a link example of littleTIP">Link</a> <span title="This is a span example of littleTIP">Span</span> <img scr="http://www.google.com/image.png" width="50" height="50" title="This is a image example of littleTIP" /> </body> </html> StylinglittleTIP has been designed to be fully configurable via CSS. Only needs one CSS id property to the body (#littleTIP), one to the background (#littleTIPbackground) and one to the text (#littleTIPtext). Hence, the appearance is easily configured with any existent CSS attribute. #littleTIP {
max-width: 250px;
padding: 5px;
}
#littleTIPbackground {
background: rgb(0,0,0);
border: 1px solid rgb(51,51,51);
outline: 1px solid rgb(0,0,0);
}
#littleTIPtext {
font-family: Helvetica, sans-serif;
font-size: 12px;
text-align: left;
}Extra ConfigurationsAll the above steps are enough but if you want diferent values for littleTIP just include a javascript snippet in the head of your document after the jQuery and littleTIP call. If you include the snippet after the littleTIP call your values will overlap the default values. As last option you can download and change it directly in the javascript file. <!DOCTYPE HTML> <html> <head> <title>littleTIP - jQuery Plugin</title> <link href='littletip.css' media='screen' rel='stylesheet'/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://littletip.googlecode.com/svn/trunk/littletip-latest.js"></script> <script> // littleTIP options (change default values to fit your needs) littleTIPdelay = 1000 ; // Delay time before appear (in milliseconds) littleTIPfade = 250 ; // Fading duration time (in milliseconds) littleTIPbackground = 0.7 ; // Background opacity (from 0 to 1) littleTIPtext = 1 ; // Text opacity (from 0 to 1) littleTIPx = 15 ; // Horizontal distance from cursor (in pixels) littleTIPy = 15 ; // Vertical distance from cursor (in pixels) </script> </head> <body> <a href="http://www.google.com" title="This is a link example of littleTIP">Link</a> <span title="This is a span example of littleTIP">Span</span> <img scr="http://www.google.com/image.png" title="This is a image example of littleTIP" /> </body> </html> License & DownloadThe terms for using this plugin can be found HERE The download zip include help, examples, the normal and the minified javascript files. It can be found HERE Developing
Changelog
Last updated: Tuesday, 3 January 2012, 16:55:18 WET |
|
|