Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Tool tip or hint widget for blogger

Tool tip can be very useful in terms of site navigation. I searched for pure css tool tips but all in vain. Most of the tutorials, available online, use JavaScript which slows down the loading time of the page. So, I decided to write a tutorial about designing a pure css based tool tip for Blogger.

What is tooltip?

As per Wikipedia: The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small “hover box” appears with supplementary information regarding the item being hovered over.

Demo: Hover over here Tool tip text appears here

Blogger hack by Ritesh Sanap.

This tooltip works with all browsers. Liked it? Just follow the instruction given below and start using it on your blog.

  1. Login to your blogger dashboard.
  2. Find </b:skin>
  3. Just above the code add the CSS given below :
    a.tip {position:relative;}
    a.tip span {display: none; position: absolute; top: auto; left: auto; padding: 5px 5px 5px 5px; z-index: 100; background-color: #000; color: #fff; border:0px solid #777; width:200px; height:auto; -moz-border-radius: 2px; -webkit-border-radius: 2px;}
    a:hover.tip {font-size: 99%;cursor:pointer;}
    a:hover.tip span {display: block;position: absolute;-moz-opacity: 0.7;
    opacity:0.7; top:auto; left:auto; right:2px; bottom:auto; line-height:14px; font-size:12px;font-weight:normal;}
  4. You Have Successfully Installed the widget.

How to Use this widget?

Check the following example.

<a class=’tip’ href=’#’>more<span>tool tips text area. know more..</span></a>

In the above code, “more” is the link. When you hover over more, the tool tip appears. The text between span tags is what appears in the tool tip.

Example :moretool tips text area. know more.

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

April 20, 2010 Ritesh Sanap Blogger Tutorials Blogger Hacks

Post navigation

Previous Previous post: Facebox – Facebook Styled Lightbox
Next Next post: Easily Publish your web content around the world

Currently Trending

  • Windows Vista CD key
  • How to download Specific parts of YouTube videos
  • How to Increase Dropbox upload speed
  • How to Change the Welcome/Login Screen in Windows XP ?
  • List Of All 255 Keyboard All Alt Key Codes
  • You might also like this Widget for blogger or Related post widget
  • ZooZooo - Vodafone Logos
  • HORIZONTAL AND VERTICAL SPACING
  • How to change Blogger Template without deleting widgets ?
  • Embed Text Resizing Widget To Increase or Decrease The Font Size

Random Posts

Easiest way to make windows genuine

July 12, 2008 By Ritesh Sanap 2 Comments

[How-To]Writting In reverse In Orkut

December 17, 2007 By Ritesh Sanap Leave a Comment

How to Create and Cutomize Archive page template in thesis

April 12, 2011 By Ritesh Sanap Leave a Comment

Related Post Plugin for wordpress

November 22, 2010 By Ritesh Sanap 2 Comments

Fazio – Blogger Template

October 30, 2010 By Ritesh Sanap 2 Comments

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2021 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.