Box Style CSS Tooltips for Blogger Blog


Best Movies Sites: TOP 10 MOVIE WEBSITES


CSS Tooltips for Blogger Blog
Adding tootip in your blog/website will help your readers to understand information without creating clutter in a design. Here are some CSS tootips for your General, Warning, Critical, Help and Information messages. Its compatible with latest versions of Firefox, Chrome, Opera, Safari and Internet Explorer. It doesn’t have to be difficult. You can add it easily to your blog and easy to use too. So lets begin.

Before we installing this CSS tooltip, you can see the demo image provided below which I have taken from my demo blog and get an idea of what we are going to make right here (You van feel this tooltips in live action bu clicking here).



live demo icon 

css tooltips

question mark icon png How to add this CSS toolstip to your blog
These buttons are very useful and easy to use. Now I would like to divide the installation of this tooltips into two parts, that's CSS part as well as HTML part. At first we can add the CSS code. Please follow the below steps.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

/* Tooltips By labstrikes.blogspot.com */
.tbi-tooltip {
 outline: none;
 cursor: help;
 position: relative;
 text-decoration: none;
 border-bottom: 1px dotted #000;
}

.tbi-tooltip span {
 margin-left: -999em;
 position: absolute;
 color: #000;
}

.tbi-tooltip:hover span {
 font-family: Trebuchet MS, Calibri, Tahoma, Geneva, sans-serif;
 position: absolute;
 left: 1em;
 top: 2em;
 z-index: 99;
 margin-left: 0;
 width: 250px;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 0px 0px 9px #000000;
 -webkit-box-shadow: 0px 0px 9px #000000;
 box-shadow: 0px 0px 9px #000000;
}

.tbi-tooltip:hover img {
 border: 0;
 margin: -10px 0 0 -55px;
 float: left;
 position: absolute;
}

.tbi-tooltip:hover em {
 font-family: Candara, Tahoma, Geneva, sans-serif;
 font-size: 1.2em;
 font-weight: bold;
 display: block;
 padding: 0.2em 0 0.6em 0;
}

.custom {
 padding: 0.5em 0.8em 0.8em 2em;
}

.tbi-general {
 background: #EDEDED;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjVmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2UzZWFlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGQ3ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1)));
 background: -webkit-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: -o-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: -ms-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: linear-gradient(to bottom,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
 -webkit-box-shadow: 4px 4px 1px 1px #ccc;
 box-shadow: 4px 4px 1px 1px #ccc;
}

.tbi-critical {
 border: 1px solid #FF3334;
 background: #ffccaa;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2NhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg0ODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffccaa 0%, #ff8482 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffccaa), color-stop(100%,#ff8482));
 background: -webkit-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: -o-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: -ms-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: linear-gradient(to bottom,  #ffccaa 0%,#ff8482 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffccaa', endColorstr='#ff8482',GradientType=0 );
}

.tbi-help {
 border: 1px solid #2BB0D7;
 background: #a9e4f7;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7));
 background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -o-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -ms-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 );
}

.tbi-info {
 border: 1px solid #2BB0D7;
 background: #a9e4f7;
 background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7));
 background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -o-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -ms-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 );
}

.tbi-warning {
 border: 1px solid #FFAD33;
 background: #f1e767;
 background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZTc2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2JjNWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f1e767 0%, #fcbc5d 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#fcbc5d));
 background: -webkit-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: -o-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: -ms-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: linear-gradient(to bottom,  #f1e767 0%,#fcbc5d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#fcbc5d',GradientType=0 );
}
/* Tooltips By labstrikes.blogspot.com */

[You can change the tooltip's font family by changing the font names in above highlighted lines - 17 & 40]

Now we have added the CSS (style) part in the template and let's see how to use them. Next I m giving HTML Code of all types of tooltips according to their names. Just follow the below simple steps to use them while writing your blog post.

  • Switch your blog post from Compose to EDIT HTML while you writing post
  • Select your tooltip code below and paste it where you want to display tooltip

General Tooltip
<a class="tbi-tooltip" href="#">ANCHOR TEXT<span class="custom tbi-general">Your Tooltip Text</span></a>

warning icon png Warning Tooltip
<a class="tbi-tooltip" href="#">ANCHOR TEXT<span class="custom tbi-warning">
<img src="https://lh3.googleusercontent.com/-sEK0idue4HM/UB1pcNMBpjI/AAAAAAAAFio/JB7yN1M0WF4/s48/Warning.png" 
alt="Warning" height="48" width="48" /><em>Warning</em>Your Tooltip Text</span></a>

critical icon png Critical Tooltip
<a class="tbi-tooltip" href="#">ANCHOR TEXT<span class="custom tbi-critical">
<img src="https://lh6.googleusercontent.com/-IIUWYhGh_-M/UB1pbdD3wCI/AAAAAAAAFiQ/9BSZXhLX-tQ/s48/Critical.png"
alt="Error" height="48" width="48" /><em>Critical</em>Your Tooltip Text</span></a>

help icon png Help Tooltip
<a class="tbi-tooltip" href="#">ANCHOR TEXT<span class="custom tbi-help">
<img src="https://lh6.googleusercontent.com/-kCmiNkbo9i4/UB1pbogi4JI/AAAAAAAAFiU/hJb76rrKNBo/s48/Help.png"
alt="Help" height="48" width="48" /><em>Help</em>Your Tooltip Text</span></a>

information icon png Information Tooltip
<a class="tbi-tooltip" href="#">ANCHOR TEXT<span class="custom tbi-info">
<img src="https://lh3.googleusercontent.com/-aPsqP_cKj0k/UB1pbaBgV_I/AAAAAAAAFiY/xqeP4CLV3ew/s48/Info.png"
alt="Information" height="48" width="48" /><em>Information</em>Your Tooltip Text</span></a>

note icon png Please note the following things
Before you publish your blog post, please make the following changes. It may help you to add more features to your tooltips.

alert icon png
  • You can replace "#" with your link if you want. If there is no link URL on the other hand just leave # for free.
  • Replace General, Warning, Information & Help "ANCHOR TEXT" with your text.
  • Replace "Your Tooltip Text" with the tooltip that you wanna show when a reader/visitor hovers your link.

Now publish your post and you're done. Hope you like this tutorial. If you have any doubt to clarify, You may feel free to ask via comment. Also please share this trick and wishing you a happy blogging:)