Learn how to add jQuery tooltip to blogspot

tooltip is popup text bubble that can show some essential information about element. Here’s a nice-looking tooltip contraption that a number of you may prefer to wear your web site. It needs no pictures and no JavaScript, it solely runs on pure CSS alone, thus you don’t have to be compelled to worry regarding it fastness down your site’s loading time. Here’s a nice-looking tooltip contraption that a number of you may prefer to wear your web site. It needs no pictures and no JavaScript, it solely runs on pure CSS alone, thus you don’t have to be compelled to worry regarding it fastness down your site’s loading time.

Here’s a nice-looking tooltip contraption that a number of you may prefer to wear your web site. It needs no pictures and no JavaScript, it solely runs on pure CSS alone, thus you don’t have to be compelled to worry regarding it fastness down your site’s loading time.



Interested people just follow the flowing step to add css tooltip widget to blog. You can see DEMO here.

1. Login into your blogger account with correct password.

2. Select Template from dropdown menu.

3. Create backup on running temple.

4. Click on Edit HTML and press process button.

5. Use Ctrl+F to find ]]></b:skin>

6. Now copy the following code and past it just before ]]></b:skin> .

.tooltip { position: relative; background: #eaeaea; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none; } .tooltip span { visibility: hidden; position: absolute; bottom: 30px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #ccc; opacity: .9; background-color: #ddd; background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .tooltip:hover { border: 0; /* IE6 fix */ } .tooltip:hover span { visibility: visible; } .tooltip span:before,.tooltip span:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid #ddd; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltip span:before { border-top-color: #ccc; bottom: -8px; }
7. Save the template for finish task.


Now if you want to check how to look your blog site then create a new post and add a class=”tooltip” attribute inside the post.It will look like: <a href="http://tipsworldbd.blogspot.com"class="tooltip">COMPUTER TIPS WORLD BD<span>World best technological blogging blog</span></a>