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,

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://lh6.googleusercontent.com/-0KM2ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR8/s1600/hb_tipTop.png) no-repeat top;
}

.tipMid {
    background: transparent url(https://lh4.googleusercontent.com/-Vu0rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M6hXn5zozh4/s1600/hb_tipMid.png) repeat-y;
    padding: 0 25px 20px 25px;
}

.tipBtm {
    background: transparent url(https://lh3.googleusercontent.com/-fcuks1eGyhM/UALZXjVS6CI/AAAAAAAACmQ/GZF8z7d7S4c/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....

Post a Comment

  1. Thanks for this amazing tutorial bro. I always come to this blog because I want to learn new things. Keep it up. If I have some problem I will come back for some help.

    ReplyDelete
  2. No doubt your tutorials are innovative and simple to execute.

    Regards
    http://www.indian-share-tips.com/

    ReplyDelete
  3. thats awesome... thank u so much.
    but i have a question.
    im using your buttons in my blog, so can i add tooltip in button images..?
    http://premium-area.blogspot.com

    ReplyDelete
  4. Nice tutorial.
    Lastly i got my searching post.

    Visit my site Blogging tips. I am interested to posting an guest post in your site.

    ReplyDelete
  5. Can you make a same tool tip like thghjvis in which when on mouse over the tip is displayed and we can give it a link too..
    Thanks
    Latest technology, softwares,gadgets,tri cks and much more

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. my best friend's mom makes $68/hour on the computer. She has been out of work for six months but last month her pay check was $21662 just working on the computer for a few hours. Read more on this web site http://Run19.com

    ReplyDelete
  8. Hi,
    Any idea about for autocomplte to blogger.
    http://alwaysiswell.blogspot.in/

    ReplyDelete
  9. hi,
    Well, I am Brazilian. Sorry my English XD. But to the point, there is some method of adding this effect throughout the blog? I appreciate the attention.

    ReplyDelete
  10. A woman takes a lot of pride in her breasts, because they help her to feel naturally beautiful and stylish as a grown woman. Triactol is a breast enhancement serum that acts on the tissues surrounding your breast and gives them a younger appearance. Large, firm, perfect and perky breasts that give a natural look are the dream of every woman. There are different methods used for the breast enlargement. Triactol bust enhancement serum has gained a larger number of fans on the market and the demand for its use is constantly growing. Triactol serum renders outstanding and guaranteed results and offers you a 60 days money back guarantee as well. No other breast enhancement cream or any such product offers this kind of guarantee to the users. Triactol works by increasing breast tissues. In order to make breasts naturally larger and perkier, the growth of the tissues are being controlled the natural way. Throughout any Triactol review, you will notice that there are more then plenty of benefits from using this serum, because it is natural and it provide the scouted results. Triactol serum utilizes quality grown bright pueraria mirifica, which functions the most efficient. Triactol is the kind of effective serum that can make your bust size grow and grow, seemingly all on their own. Sure, the process will be a little bit more drawn out than a nip and tuck, but you’ll be protecting your future health while also improving your appearance. This is the kind of solution that you can count on, and a very real reason to buy Triactol, For more review about TriactolBust Serum, Visit http://www.triactolplus.com

    ReplyDelete
  11. thank u for information..!!

    ReplyDelete
  12. I'm going to try this one to my site about Glimpse of iPhone 6 under development, I think it has great and appealing look.

    ReplyDelete
  13. free download all types of pc softwares and games full version in one single clik.


    follow this link...


    http://adf.ly/RZDKF

    ReplyDelete
  14. Hi Rahul.I have used this in my blog.It worked for me...bu it just popped up like a default browser tooltip(the white colour small box when we hover over the title in firefox).I am not getting the big box like you...Please help..

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. my blog is ngtechzone.blogspot.com and i want to remove powered by blogger please can you help me

    ReplyDelete
  17. Loved the post.
    http://trickzbucket.blogspot.com/

    ReplyDelete
  18. Wow. This really made my day. Thanks a lot!
    JQuery Training JQuery Training Javascript JQuery Online Training

    JQuery Online Training JQuery Online Training Javascript Online Training JQuery Training

    JavaScript Training Courses

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top