Tooltips can be a helpful way to provide information to visitors without creating clutter in a design. If you would like to add an attractive tooltip to your website it doesn’t have to be difficult. There are plenty of quality scripts available for use that will allow you to set up tooltips without coding it from scratch.In this tutorial I will we will see how to Add a jQuery Tool Tip To Blogger very easily.I am dividing this post into three parts.

  1. Adding The CSS
  2. Adding The jQuery Scripts.
  3. Showing The Tool Tip In Blogger Posts.


1.Adding The CSS


  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Backup/Download Your Template.
  3. Find ]]></b:skin> and paste below code just before it.

.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}

.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;

background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0   1px 0   rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0   1px 0   rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0   1px 0   rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}

.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}

.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}

.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}


2.Adding jQuery Script And Plugin


Now find </head> tag and paste below code just above </head> tag.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='http://btsnts.googlecode.com/files/helper-blogger-tooltip01.js' type='text/javascript'></script>


(Note - If you have already added the jQuery plugin to your blog then remove the code in red line above.)

3.Using Tool Tip In Blogger Posts


If you want to use tool tip in blogger posts or any where on your blog then use below code.

<b data-tooltip="Words Which You Want To Show In Tool Tip">Original Word</b>
If you can't use these tool tips then please share your problem with me I'll glad to help you....

Post a Comment

  1. This comment has been removed by the author.

    ReplyDelete
  2. how can i adjust the width of this tool tip automatically according to words?

    ReplyDelete
  3. Provillus is rated hair loss product of the year for men and women hair loss! Provillus is FDA approved solution to stop hair loss and regrow hair back! Read Provillus review before order at www.managehairloss.com

    ReplyDelete
  4. I just found Review on Adiphene, Triactol, Provillus and ZetaClear, Phen375, Garcinia Cambogia Select and Acai Plus with Detox Plus Today, so thought it would be great piece of information to share!

    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