Sep 14
qTip is Jquery’s Plug in that was created by Craig Thompson, it’s very cool and simple tooltips, this post will guide you how to simple implement qTip within few steps, first of all you must download the whole code from http://craigsworks.com/projects/qtip/download/.
Put this script before </head>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul.contain li a[title]').qtip({ position: { corner: { target: 'bottomMiddle', tooltip: 'topMiddle' } }, style: { name: 'dark', padding: '7px 13px', width: { max: 210, min: 0 }, tip: true } }); }); </script> |
Put this code inside <body>
1 2 3 4 |
In this case i just used a simple option for the object., there’re still have serveral featured for this qtip such as positon of tooltip and themes, for more info please visit http://craigsworks.com/projects/qtip/docs/tutorials
