How To Add jQuery Tooltip To Blogger

jQuery tooltip plugin is great tool to explain a lot from a single word.You can easily implement this in your blog also it is very easy to use.You can highlight some words and add a tooltip to them,when any user hovers on the word a smooth tooltip will appear just above of the highlighted word with your description.This jQuery tooltip is designed by nettuts+ and I have reshared it on Helper Blogger.Now lets see how to add it and use it,

Live Tooltip Demo

How To Add jQuery Tooltip To Blogger?

As I mentioned above the installation and usage of the tooltip is very easy,you just have to put some code in your template,just follow below simple steps.

1. Adding Tooltip Scripts

1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Find for below code in your template

</head>

add below code just above it,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://helperblogger.ucoz.com/code/jquery-tooltip.js"></script>

Note - If you have already added a jQuery plugin to your blog then don't add the first line from above code.

2. Adding Tooltip Styles

Find below code in your template,

]]></b:skin>

add below code just above it,

.tip {
    width: 212px;
    padding-top: 37px;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 500;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctKGUBx9-pciyjwouQ9u1thqSoWHl_pDYw55k6JykUi0d8cYSa5CQ8MDrYsR9e6tur4Bwb9teCbCs2ax4qzYx1m9flC4UdKytZk12zi4TjpT-yLMQqaesOm8QsEdr3IRbsu12Hz50sqk/s1600/hb_tipTop.png) no-repeat top;
}

.tipMid {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNbi4Pll4_g24jUGJQD4IZULnUjCfqQlss3xf1DHb9ZtsrFJ76AusSAVRPJpvM3TmgCGWhn4UXUy5jt4lwGYPIPKaSpysaQH4J7-NHCr1hR58OGaktK10vSn7P5xv1zip5ZcUfP5b_gNU/s1600/hb_tipMid.png) repeat-y;
    padding: 0 25px 20px 25px;
}

.tipBtm {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtLhv-BJahVeyUWn3lKtyAairYL93BoVeM20ZJdjRnLLV3dKgB3J44768MvIZy-NOH0totGgXpDb-u7j0pG8gT1rPv24BQIMPP_cJDouo6YNqeJVA_aCjDkpKRRGnUnPrGlNaEVthrWw/s1600/hb_tipBtm.png) no-repeat bottom;
    height: 32px;
}

3. Using The Tooltip

If you want to add tooltip in blogger posts,then go to Edit HTML tab and add below code inside it.

<div class="tTip" title="Add Tooltip Message Here">Add Your Text Here</div>

• Replace Add Tooltip Message Here with the message which you want to appear in tooltip.
• Replace Add Your Text Here with the text on which you want to appear tooltip.

Hope you have liked it :)

Peace and Blessings Buddies....