What is ChillTip ?

ChillTip is a jQuery plug-in that allows you to have a custom designed tooltip for your website or web page. It can be used with span, img, anchor attributes and pretty much anything else that uses the title attribute

Why use ChillTip ?

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 can result to errors in different browsers.

Others showed the default browser tooltip as well 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 called ChillTip to provide a solution that addressed these problems and which allows anyone to customize a tooltip to a specific design that really works without any limitations.

Download ChillTip

Download the latest version of ChillTip below.

Examples

Here is an example of ChillTip being used on an image:-

Image of ChillTip



Here is an example of ChillTip being used with a button:-



Here is an example using span attribute:-

This is an example of ChillTip using the span attribute!



Here is and example of ChillTip being used with a link:-

I am a link, hover over me.

How to install ChillTip

ChillTip is very easy to install, all you require for it to work is the chilltip-packed.js file and the latest version of the jQuery framework, please follow the steps below which will walk you through how to install ChillTip onto your website.

Step 1 - Open or Create a new web document.

Open your web page that you would like to add to ChillTip to or create a new HTML document.

Step 2 - 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 your scripts folder.

Alternatively you can add the following script to your head section of your web page which is what we are going to use in this example.

<head>

<script
type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

Step 3 - Download ChillTip

Download ChillTip by clicking the link above and save it to your scripts folder in this example we are using 'js' as our script folder and add it to the head section of your page.

<head>

<script
type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script
type="text/javascript" src="js/chilltip-packed.js"></script>

</head>

Step 4 - 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. Then we have to activate the ChillTip plugin for class ChillTip by adding the script in the example below.

<head>

<script
type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script
type="text/javascript" src="js/chilltip-packed.js"></script>
<script
type="text/javascript">

$(function(){
$('.ChillTip').ChillTip();
});

</script>

</head>
<body>

<a href="chilltip" class="ChillTip" title="To learn more about the ChillTip Project click here.">For more info.</a>

</body>

Result: For more info.

Step 5 - 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="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>

<script
type="text/javascript">

$(function(){
$('.ChillTip').ChillTip();
});

</script>

</head>
<body>

<a href="chilltip" 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.

NOTE

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 6 - 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="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>

<script
type="text/javascript">

$(function(){
$('.ChillTip').ChillTip();
});

</script>

</head>
<body>

<a href="chilltip" 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.

ChillTip Options

ChillTip has a many options allowing you to fully customise your own tooltip to suit your website. You can change the options at the top of the ChillTip script or by passing the value to the plugin like so: $('.ChillTip').ChillTip({option:'value'});

OptionValue RangeDefault ValueDescription
CTBK#000000 - #FFFFFF#000000Background colour using (hex colour codes)
CTBC#000000 - #FFFFFF#333333Border colour using (hex colour codes)
CTTC#000000 - #FFFFFF#FFFFFFNormal text colour using (hex colour codes)
C1#000000 - #FFFFFF#1E90FFText colour 1 using (hex colour codes)
C2#000000 - #FFFFFF#FF00CCText colour 2 using (hex colour codes)
C3#000000 - #FFFFFF#33CC00Text colour 3 using (hex colour codes)
C4#000000 - #FFFFFF#9900FFText colour 4 using (hex colour codes)
C5#000000 - #FFFFFF#FF0000Text colour 5 using (hex colour codes)
C6#000000 - #FFFFFF#FFFF00Text colour 6 using (hex colour codes)
CTTFCSS font-family propertyArial, Helvetica, sans-serifFont family
CTCCSS cursor propertyPointerCursor type
CTFT0 - 5000250ChillTip fade in time in (milliseconds))
CTW0 - 500250ChillTip max width in (px)
CTTP0 - 2510Text padding in (px)
CTTS0 - 1611Text size in (px)
CTBW0 - 102Border width in (px)
CTTO0 - 20020Top offest from mouse in (px)
CTLO0 - 20020Left offest from mouse in (px)
SHADtrue / falsetrueShow shadow


Taking things further

If you want to customise each tooltip differently now you can. In this example we will change class to class="ChillTip1" therefore we are not using the default settings and we are going to set the background colour to white, the border colour black, the width to 150px and the opacity to 100% whilst the rest of the tooltips stay as the default settings. This is how we do this:-

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chilltip-packed.js"></script>

<script type="text/javascript">

$('.ChillTip1').ChillTip({
CTBK:'#fff',
CTBC:'#000',
CTW:'150'
});

</script>
</head>
<body>

<a href="chilltip" class="ChillTip1" 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 chilltip-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.4.3 to 1.6.4, previous versions may work but not as intended.

Change Log

Version 1.3 - ChillTip now calculates the position of your tooltip so it stays within the window and shadow feature has now been added.
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 of ChillTip.

Donate & help towards future developments.

If you are feeling generous, consider a donation. Any and all PayPal donations are much appreciated and help towards improving and the development of newer versions. Many thanks.

PayPal


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). Alternatively you can email mail me by clicking here.