How To Add jQuery Tool Tips To Blogger Very Easily ?

Tooltips can be a helpful way to provide information to visitors without creating clutter in a design. If you would like to add an attractive tooltip to your website it doesn’t have to be difficult. There are plenty of quality scripts available for use that will allow you to set up tooltips without coding it from scratch.In this tutorial I will we will see how to Add a jQuery Tool Tip To Blogger very easily.I am dividing this post into three parts.

1. Adding The CSS
2. Adding The jQuery Scripts.
3. Showing The Tool Tip In Blogger Posts.

View Demo 

1.Adding The CSS

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Backup/Download Your Template.
3. Find ]]></b:skin> and paste below code just before it.

.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}

.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;

background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0   1px 0   rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0   1px 0   rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0   1px 0   rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}

.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}

.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}

.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}

2.Adding jQuery Script And Plugin

Now find </head> tag and paste below code just above </head> tag.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='http://btsnts.googlecode.com/files/helper-blogger-tooltip01.js' type='text/javascript'></script>

(Note - If you have already added the jQuery plugin to your blog then remove the code in red line above.)

3.Using Tool Tip In Blogger Posts

If you want to use tool tip in blogger posts or any where on your blog then use below code.

<b data-tooltip="Words Which You Want To Show In Tool Tip">Original Word</b>

If you can't use these tool tips then please share your problem with me I'll glad to help you....