Overview

ChillTip, designed by Christopher Hill, is a jQuery Plugin that allows you to have a custom designed tooltip for your website. ChillTip was designed to have no limitations and to be easy to use and install. It can be used for span, img, anchor attributes and pretty much anything else that uses the title attribute.

ChillTip has been designed in a way that allows you to be fully customise the tooltip to suit your needs and theme of your site. ChillTip is a small and easy to install script that is uses jQuery. ChillTip has also been designed not to conflict with other frameworks such as Prototype and Mootools.

ChillTip has been tested on all major web browsers such as Internet Explorer, Google Chrome, FireFox, Safari, Opera and more.

Example & Demonstration

Here are a few examples, simply hover your mouse over the attributes to reveal ChillTip:-

Image of ChillTip



This is a span example.

This is a link example.

This is a anchor example.

Download


Download ChillTip Download jQuery

How to install

Step One - Download ChillTip

Download 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:

<head>

<script
type="text/javascript" src="js/jquery-1.4.4.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.

<head>

<script
type="text/javascript" src="js/jquery-1.4.4.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 &#60; , / to &#47; , " to &#34; , > to &#62; like below.

<head>

<script
type="text/javascript" src="js/jquery-1.4.4.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 &#60;span class=&#34;one&#34;&#62;Chilltip&#60;&#47;span&#62; 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. These characters can not be used inside the title attribute as 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 &#60;span class=&#34;one&#34;&#62; YOUR CONTENT &#60;&#47;span&#62;

For Color Two Add &#60;span class=&#34;two&#34;&#62; YOUR CONTENT &#60;&#47;span&#62;

For Color Three Add &#60;span class=&#34;three&#34;&#62; YOUR CONTENT &#60;&#47;span&#62;

For Color Four Add &#60;span class=&#34;four&#34;&#62; YOUR CONTENT &#60;&#47;span&#62;

For Color Five Add &#60;span class=&#34;five&#34;&#62; YOUR CONTENT &#60;&#47;span&#62;

For Color Six Add &#60;span class=&#34;six&#34;&#62; YOUR CONTENT &#60;&#47;span&#62;

So if we use all six colours should should have something similar to below:-

<head>

<script
type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script
type="text/javascript" src="js/chilltip-packed.js"></script>

</head>
<body>

<a href="chilltip.html" class="ChillTip" title="&#60;span class=&#34;one&#34;&#62;Blue&#60;&#47;span&#62;, &#60;span class=&#34;two&#34;&#62;Pink&#60;&#47;span&#62;, &#60;span class=&#34;three&#34;&#62;Green&#60;&#47;span&#62;, &#60;span class=&#34;four&#34;&#62;Purple&#60;&#47;span&#62;, &#60;span class=&#34;five&#34;&#62;Red&#60;&#47;span&#62;, &#60;span class=&#34;six&#34;&#62;Yellow&#60;&#47;span&#62;">For more info.</a>

</body>

Result: For more info.

Support

Can I use the script in a commercial website?

ChillTip is licensed under a Creative Commons Attribution 3.0 Unported License. For correct attribution, all that is required is that you leave the details and link at the top of the chillbox-packed.js (Javascript File). A html link would be appreciated, but it is not required.

Creative Commons License


What versions of jQuery will ChillTip work with?

ChillTip has been tested on all jQuery Versions 1.3 to 1.4.4.

Change Log

Version 1.2 - IE6 width fix and more options added and the ability to change the ChillTip class name.
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 by clicking here. Please make sure to include details on your browser, operating system, ChillTip version, and a link (or relevant code). Alternatively you can email mail me by clicking here.