custom tooltip jQuery plugin（ChillTip）

Home Tooltipscustom tooltip jQuery plugin（ChillTip）

custom tooltip jQuery plugin（ChillTip）

13 years ago Views

57756

1865

chillwebdesigns

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.

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

<head>

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

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

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 YOUR CONTENT 

For Color Two Add YOUR CONTENT 

For Color Three Add YOUR CONTENT 

For Color Four Add YOUR CONTENT 

For Color Five Add YOUR CONTENT 

For Color Six Add YOUR CONTENT

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

<head>

<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="&#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>

Tag: tooltips