Welcome to the ChillTip Project, a JQuery PlugIn and Graphical User Interface Element.

Overview of ChillTip

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.

Download

How to use

Open a text editor like notepad and copy and paste the code below and save the file as chilltip.js (Javascript File). Create a folder / directory called js and place chilltip.js inside.

$(document).ready(function(){

$('.chillTip').mouseover(function(){
$('body').append('<div class="title"></div>');
var title = $(this).attr("title");
$('.title').append('<p>' + title + '</p>');
$('.title').css("filter:","alpha(opacity=85)").css("-moz-opacity","0.85").css("-khtml-opacity", "0.85").css("opacity", "0.85");
$('.title').fadeIn(500);
this.tip = this.title;
this.title = "";
});

$('.chillTip').mousemove(function(e){
var border_top = $(window).scrollTop(),border_right = $(window).width(),offset = 15,left_pos,top_pos;
if(border_right - (offset *2)>= $('.title').width() + e.pageX){left_pos = e.pageX + offset;
else{left_pos = border_right - $('.title').width() - offset;}
if(border_top + (offset *2)>= e.pageY - $('.title').height()){top_pos = border_top + offset;}
else{top_pos = e.pageY - $('.title').height() - offset;}
$('.title').css({left:left_pos, top:top_pos});
});

$('.chillTip').mouseout(function(){
$('.title').remove();
this.title = this.tip;
});

});

Because ChillTip is a JQuery Plugin, you will require Jquery for it to work. Simply download the latest version from the JQuery Website and save it to the js folder / directory. Now add the Jquery Framework and chilltip.js to the head section of your web page.

Now we need to create the stylesheet for the ChillTip. Simply copy the code below and paste it into a text editor and save it as chilltip.css (CSS File). Create a folder / directory and name it css and place chilltip.css inside and add it to head section of your web page.

@charset "utf-8";
/* ChillTip Style Sheet */

.title{
background:#000;
border:2px solid #333;
display:none;
font-family:Arial,"Helvetica",sans-serif;
font-size:11px;
height:auto;
min-width:10px;
max-width:145px;
position:absolute;
width:auto;
z-index:1001;
}
* html .title{
width:145px;
}
.title p{
color:#fff;
float:left;
margin:0;
padding:10px;
text-align:justify;
width:auto;
}
.title p span.blue{
color:#007eff;
}

Now we should have something like below in our head section:

Now we can now add chillTip to our html code. To do this create a img, anchor or span attribute. In this example I am going to use anchor attribute to create a link. Then I am going to add class="chillTip" as I want the Chilltip to be applied to this link. Then I then add the title="" attribute to give a description of what the link is for.

Result: For more info.

Now to change the colour of the text in our Chilltip to blue we need to put the content we want to change colour inside <span class="blue"></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="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chilltip.js"></script>
<link type="text/css" rel="stylesheet" href="css/chilltip.css" />

</head>
<body>

<a href="chilltip.html" class="chillTip" title="To learn more about the <span class="blue">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.

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 chilltip.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).

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.