Overview
Designed by Christopher Hill, ChillTip is a JQuery Plugin that allows you to have a custom designed tooltip for your website. It can be used for span, img, anchor attributes and pretty much anything else that uses the title attribute. ChillTip has been tested with IE6, IE7, IE8, Firefox, Google Chrome, Opera and Safari.
Before starting this project I had previously used custom tooltips, whilst using a few I quickly came across problems. Many of them had custom designed attributes that were not recognized by HTML Validators which led to the failure of validation of a webpage.
Others showed the default browser tooltip aswell as the custom one. Some would not allow symbols or characters to be displayed and would stop the page working and others where not customizable.
Therefore I set out to design my own one tooltip and to provide a solution that addressed these problems and to design a tooltip that really works without any limitations.
Example & Demonstration
Here are a few examples, simply hover your mouse over the attributes to reveal ChillTip:-
This is a span example.
This is a link example.
This is a anchor example.
How to install
Step One - Download ChillTip
Downlaod chilltip-packed.js and place it in your javascript directory in this example we are using a directory called 'js'.
Step Two - Download JQuery
ChillTip is a JQuery Plugin, therefore you will require Jquery for it to work. Simply download the latest version from the JQuery Website and save it to the 'js' directory.
Step Three - Add PlugIn & Framework to the head section
Now add the Jquery Framework and chilltip-packed.js to the head section of your web page. Now we should have something like below in our head section:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>
</head>
Step Four - Add ChillTip to attributes.
Now we can now add ChillTip to our html code. To do this create a img, anchor or span attribute. In this example we are going to use anchor attribute to create a link. Then I we are going to add a class="ChillTip" as we want the Chilltip to be applied to this link. Then add the title="YOUR CONTENT" attribute to give a description of what the link is for.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>
</head>
<body>
<a href="chilltip.html" class="ChillTip" title="To learn more about the Chilltip Project click here.">For more info.</a>
</body>
Result: For more info.
Step Five - Adding Colour
In this example we are going to change the colour of the word Chilltip to blue. We need to put the word ChillTip <span class="one"></span>. But for it to work correctly we need to change the < / " > to ascii html codes. For example change < to < , / to / , " to " , > to > like below.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>
</head>
<body>
<a href="chilltip.html" class="ChillTip" title="To learn more about the <span class="one">Chilltip</span> Project click here.">For more info.</a>
</body>
Result: For more info.
The reason why we have to use ascii html characters is that the html validators will see the a span attribute inside a title attribute that uses < / " > characters that can not be used inside the title attribute therefore it will fail to validate your web page. To use other symbols or characters just use that ascii html code for that character.
Step Six - Adding More Colour
ChillTip has been designed to be easily customizable and can use up to 6 colours at one time. Theses colours values can be changed in the chilltip-packed.js file at the top.
To add up to six colours in your ChillTip just add:
For Color One Add <span class="one"> YOUR CONTENT </span>
For Color Two Add <span class="two"> YOUR CONTENT </span>
For Color Three Add <span class="three"> YOUR CONTENT </span>
For Color Four Add <span class="four"> YOUR CONTENT </span>
For Color Five Add <span class="five"> YOUR CONTENT </span>
For Color Six Add <span class="six"> YOUR CONTENT </span>
So if we use all six colours should should have something similar to below:-
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>
</head>
<body>
<a href="chilltip.html" class="ChillTip" title="<span class="one">Blue</span>, <span class="two">Pink</span>, <span class="three">Green</span>, <span class="four">Purple</span>, <span class="five">Red</span>, <span class="six">Yellow</span>">For more info.</a>
</body>
Result: For more info.
Support
Can I use the script in a commercial project?
ChillTip is licensed under the Creative Commons Attribution 2.5 License. As for correct attribution, all that is required is that you leave my name and link at the top of the chillbox-packed.js (Javascript File). I would appreciate an html link, but it is not required.
What versions of JQuery will ChillTip work with?
ChillTip has been tested on all JQuery Versions 1.3 to 1.4.2 (Latest Version).
Change Log
Version 1.1 - Compiled into one javascript file and options added for border colour, text colour, opacity and more.
Version 1.0 - Original Release
Contact
For troubleshooting, feature requests, and general help, send me a message by using the enquiry form on my contact page. Make sure to include details on your browser, operating system, ChillTip version, and a link (or relevant code)..