Gips è un plugin jQuery elegante e semplice da implementare ed utilizzare, che offre inoltre larga personalizzazione delle opzioni e supporto CSS.
Implementazione
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Clean and Minimal Tooltip Plugin: Gips</title> <link href="css/gips.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/gips.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('input#purple').gips({ 'theme': 'purple', autoHide: true, text: 'This is purple tooltip, auto hide after pausess time elapses.' }); $('input#green').gips({ 'theme': 'green', placement: 'left' }); $('input#yellow').gips({ 'theme': 'yellow', autoHide: true, placement: 'right' }); $('input#red').gips({ 'theme': 'red', placement: 'bottom' }); }); </script> </head> <body> <div id="center"> <div id="header"> </div> <div id="demo"> <input type="text" value="Purple Tooltip Here." id="purple" /> <input type="text" value="Green Tooltip Here." id="green" /> <input type="text" value="Yellow Tooltip Here." id="yellow" /> <input type="text" value="Red Tooltip Here." id="red" /> </div> </div> </body> </html> |
Demo Download Info | Sito Web | Autore
pixolo ads