How To Add jQuery Tooltip To Blogger Blog

Build a Better Tooltip with jQuery Awesomeness - A tooltip is a box that appears when you hover your cursor over the text like a hyperlink. It provides supplementary information about that text with useful description. This simple tutorial will guide you "How To Add jQuery Tooltip To Blogger Blog".

I am re-sharing this from Help Blogger Blog. To see a tooltip in action, visit the link given below. Let's start working on this tutorial.

Live jQuery Tooltip Demo Below

Live Demo

How To Add jQuery Tooltip To Blogger Blog

1. Adding Tooltip Scripts

• Go to Blogger Dashboard > Template
• Take Back Of Your Template Before Make Any Change
• Click On Edit HTML
• Click On Proceed Button
• Find Below Code In Your Template

</head>

• Add Below Code Just Above/Before 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://code.helperblogger.com/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/AVvXsEjq0lBl3U_Sw8yVXQ-FlxmAghlXHbtArFJbfImIfhDyAoUolSaYW0FqBambmoc4nf-giRB1F4-C9V1O0HWxyqcwplJjFdwTQM-k9ogvOVUMj67QW9q1n-hs-3QlDuqmFEXSwP3bxPp8Cvk/s1600/hb_tipTop.png) no-repeat top;
}
.tipMid {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpbjAyzv5U99Mu7gfZA7k0rPJEfA5IYZakjIUoClteIXBYp4aT-nA4FJ1_D_UStq0q_zWej3BMnIzQ6Dr_VvzScd68AviKEl4u2y-8xFXWb3XVHqITo2188aaU7BDWdW2-uVFaC08KjoY/s1600/hb_tipMid.png) repeat-y;
padding: 0 25px 20px 25px;
}
.tipBtm {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFg05F10vQmefh_8LaVygr2rSDV3RkD0UE_BSnsUeQvlLZfKbCCdt9wujzMgRISvtcOoCNmCmBIWSZhwT0abWkpxzVei7eXilksm-FiahyphenhyphencMZbxnhJQkrbMcqcKkTiMzRsz_M5ZzVRYU/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.

If you need any other help, you can ask via comments any time.