Home » Blogger Tutorials, Tricks and Hacks » Add A CSS Tooltip Gadget To Your Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add A CSS Tooltip Gadget To Your Blogger

Add A CSS Tooltip Gadget To Your Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

774 views

Here’s a nice-looking tooltip gadget that some of you might like to have on your website. It requires no images and no JavaScript, it only runs on pure CSS3 alone, so you don’t have to worry about it slowing down your site’s loading time.

The code is built by Red Team Design and the tutorial on how to apply it to Blogger is by Aditya Thakker of Blog-Toolz. Check out the demo.

Follow the steps below:

  • Go to the “Template” section in your Blogger dashboard.
  • Click on “Edit HTML” and then “Proceed”.
  • Using “Ctrl+F”, look for ]]></b:skin>
  • Copy the following CSS code and then paste it right before it:
.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;
}     
  • Save your template and you’re done!

Now to check and see how it looks on your site, simply create a new post and just add the class=”tooltip” attribute inside the tag of the text you want to have the tooltip on. (See example below)

<a href="#"class="tooltip">This is the text that will have the tooltip<span>This will be the tooltip’s message</span></a>

If you did everything right, then you should then see a tooltip pop up over the text that contains the tag. Enjoy!

Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here