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
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 the latest version of ChillTip below.
Here is an example of ChillTip being used on an image:-
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.
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 ChillTipto 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.
Step 3 - Download ChillTip
Downlaod 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.
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.
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 < , / to / , " to " , > to > 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.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.
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 <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:-
Result: For more info.
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'});
| Option | Value Range | Default Value | Desciption |
| CTBK | #000000 - #FFFFFF | #000000 | Background colour using (hex colour codes) |
| CTBC | #000000 - #FFFFFF | #333333 | Border colour using (hex colour codes) |
| CTTC | #000000 - #FFFFFF | #FFFFFF | Normal text colour using (hex colour codes) |
| C1 | #000000 - #FFFFFF | #1E90FF | Text colour 1 using (hex colour codes) |
| C2 | #000000 - #FFFFFF | #FF00CC | Text colour 2 using (hex colour codes) |
| C3 | #000000 - #FFFFFF | #33CC00 | Text colour 3 using (hex colour codes) |
| C4 | #000000 - #FFFFFF | #9900FF | Text colour 4 using (hex colour codes) |
| C5 | #000000 - #FFFFFF | #FF0000 | Text colour 5 using (hex colour codes) |
| C6 | #000000 - #FFFFFF | #FFFF00 | Text colour 6 using (hex colour codes) |
| CTTF | CSS font-family property | Arial, Helvetica, sans-serif | Font family |
| CTC | CSS cursor property | Pointer | Cursor type |
| CTFT | 0 - 5000 | 250 | ChillTip fade in time in (milliseconds)) |
| CTW | 0 - 500 | 250 | ChillTip max width in (px) |
| CTTP | 0 - 25 | 10 | Text padding in (px) |
| CTTS | 0 - 16 | 11 | Text size in (px) |
| CTBW | 0 - 10 | 2 | Border width in (px) |
| CTTO | 0 - 200 | 20 | Top offest from mouse in (px) |
| CTLO | 0 - 200 | 20 | Left offest from mouse in (px) |
| SHAD | true / false | true | Show shadow |
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:-
Result: For more info.
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.
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.
Version 1.3 - ChillTip now calculates the position of your tootip 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.
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.
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.
