Step by step instructions to Add jQuery Tooltip To Blogger

jQuery tooltip plugin is extraordinary apparatus to clarify a great deal from a solitary word.You can undoubtedly execute this in your web journal additionally it is anything but difficult to use.You can highlight a few words and add a tooltip to them,when any client drifts on the word a smooth tooltip will seem only above of the highlighted word with your description.This jQuery tooltip is composed by nettuts+ and I have reshared it on Advancetricks.Now lets perceive how to include it and utilization it,

LIVE DEMO

How To Add jQuery Tooltip To Blogger?

As I said over the establishment and utilization of the tooltip is extremely easy,you simply need to put some code in your template,just take after beneath basic steps.

1. Adding Tooltip Scripts

• Go to Blogger Dashboard > Template
• Download a copy of your template
• Click on Edit HTML
• Hit Proceed button
• 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, 

/**advancetricks.com**/ .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/AVvXsEgRp66C9dVYyYJx885g9qtwAP9a99ZWzZbO2v5x523dPoMGg2PHnHVQfN5vOdc871CHnIAJ7kvgYVfzy4AX34PFu6ZyXHC5DIcXkZ0wPWi4wFHWjkJrcHLEbjDrhe7TYL4NN92kgaspTiE/s1600/hb_tipTop.png) no-repeat top; } .tipMid { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgef5BBuvj2w1YTw5gNGiCJLpJ8VK1rX9jBDlOjjIbGNL0GWatxqEMLB_WTHW8Es-icZ8pgTDBt43oNlYZTpIN1cQweVf0L6-v3geTSpDq0wVTc78CUa7fuE9B7VWVVL2SSf9yQKHKT0Qk/s1600/hb_tipMid.png) repeat-y; padding: 0 25px 20px 25px; } .tipBtm { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipbJWw6UfkNxwXQ9QfERqrENQMF-BXnvMOpHMxkGCeQNjz-StywxUEvGGN5ReOafwCUHYZvQ-1cuVKeJzi9zOpPD2HAErscdFGMSlL_icwULrIS7gWYPB0OUZZjnYjioyIz5r4R5NBuvA/s1600/hb_tipBtm.png) no-repeat bottom; height: 32px; }


3. Using The Tooltip


In the event that you need to include tooltip in blogger posts,then go to Edit HTML tab and include underneath 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.

Trust you have loved it :) 

Peace and Blessings Buddies....