Skip to content

jQuery Plugin: ClearTip – A Tooltip Plugin

September 27, 2011

Tooltips are the easiest and coolest way to show the additional information or special reference which is often shown in the mouseover, here I have developed a pretty simple jQuery based tooltip plugin and named it as ClearTip. ClearTip is a simple and easily cusomtizable tooltip plugin. This plugin uses jQuery framework which has seven different types of effects and it also allows you to customize the time interval of the effects, background, border, border-radius, width, text color etc, so that this can be implemented both in corporate and social websites. Cleartip is open source jQuery plugin, you can use this for devlopement and further enhancement.

Cleartip - A Tooltip Plugin

 

How to Use?

ClearTip is very easy to implement in your web page. Follow the steps below,

Step 1: Include the Script

Include the javascript files inside the HTML document.


<script type="text/javascript" src="your_file_path/jquery-1.6.1.js"></script>
<script type="text/javascript" src="your_file_path/cleartip.js"></script>

Step 2: The HTML

Please follow the same HTML structure.


<div class="content">
	<a rel="title" class="effect_one" 
	title="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 		
	veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
	magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
	href="#"> <span>Lorem Ipsum</span> </a> is simply dummy text of the printing and typesetting industry. 
	Lorem Ipsum has been the industry's standard 
	<a rel="div_two" class="effect_two" href="#">dummy text</a> 
	ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also 	the leap into electronic typesetting, remaining essentially unchanged.
</div>
	
<div id="div_two" style="display:none;">
	Hello, this is a content from a div tag, which is not from the <a href="#">title of an anchor tag</a>. If you want to 
	display an images or anchor links, you can use this tooltip type. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
	sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
	consectetur, adipisci velit.
</div>

You can display the information in two difference ways. Suppose, If the content has some links or images to display, the particular content can be placed inside a ‘div’ element with an ‘id’ and the ‘style’ as ‘display : none’. The ‘id’ provided for the div can be used as the ‘rel’ of the anchor tag, else if it is a normal content, that can be placed inside the ‘title’ of an anchor tag. Please have a look at the above HTML example.

Step 4: Activate the Plugin

Activating it with the ‘id’ or ‘class’ that you have used in the div tag.


$('.effect_one').cleartip({
	effect: 'fade',
	timer: 500
});

$('.effect_two').cleartip({
	effect: 'grow', /* Type of the effect (fade, blow, grow, slide, shake, dropltr, droprtl)*/
	timer: 500, /* Time interval between the effects.*/
	bgcolor: '#ffc7c7', /* Background color of the information. It can be also an image.*/
	bordercolor: '7px solid #dc4747',  /* border color of the information*/
	width: '350px',  /* Width of the infomation*/
	textcolor: '#252525' /* Text color of the information.*/
});

Thats it. You have done.

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: