Friday, 22 May 2015

How to Add Tooltip in Blogger Blog

tips4tricx
Tooltip is one of the best way to explain a lot of words from single word because you can just display one word on your blog page and whenever a user hover a mouse on it then some other words will appears that you’ve added in the tooltip, so today in this tutorial we will show you a method to do the whole process in blogger. You know that we already shared different tutorials about CSS and JQuery but now today here we will discuss about both of them.
You may get amazed that you can use CSS or JQuery to customize tooltip in your blog? Yes! It’s true that you can use both methods to add this amazing tool in your blog. It’s your desire that which one you want to add in your blog and make your text more smooth and professional.

How to Add Tooltip in Blogger?

As we already mentioned that we can use both method and add tooltip in our blog, so below we will discussed both methods with fully detail. All you need to do is to simply follow below instruction and then customize this tooltip according to your website design.

1. Adding JQuery Tooltip to Blogger

  • Go to Blogger Dashboard>> Template>> Edit HTML.
  • Find below code in your template.
 </head>
  • Now simply copy and paste below coding just above it.
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B5XHBEaFFoSYYXI1ZGV1VmxIVjg"></script>

Note:

If you’ve already added a JQuery plug-in to your blog then don’t add it again, simply remove the first line from code. (Tip: You can manually search it in your blog because it will usually appear in start of your template coding).
  • Again find below code in your template.
 ]]></b:skin>
  • Now simply paste the following code above it.
 .tip {
width: 212px;
padding-top: 37px;
overflow: hidden;
display: none;
position: absolute;
z-index: 500;
background: transparent url(https://lh6.googleusercontent.com/-0KM2ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR8/s1600/hb_tipTop.png) no-repeat top;
}
.tipMid {
background: transparent url(https://lh4.googleusercontent.com/-Vu0rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M6hXn5zozh4/s1600/hb_tipMid.png) repeat-y;
padding: 0 25px 20px 25px;
}
.tipBtm {
background: transparent url(https://lh3.googleusercontent.com/-fcuks1eGyhM/UALZXjVS6CI/AAAAAAAACmQ/GZF8z7d7S4c/s1600/hb_tipBtm.png) no-repeat bottom;
height: 32px;
}
  • After making these all changes, simply click on “Save Template” and you’ve successfully done it.

Using JQuery Tooltip in Posts or Pages!

  • Go to Blogger Dashboard>> Posts>> Create New Post.
  • Simply move to HTML section and past below coding, where you want to use tooltip.
 <div class="tTip" title="Add Simple Text Here">Add Hover Text Here</div>
  • Replace green highlighted “Add Simple Text Here” with any text that you want to display before a user mouse hover on it.
  • Replace yellow highlighted “Add Hover Text Here” with any text that you want to display, whenever a user mouse hover on it.

2. Adding CSS Tooltip to Blogger

  • Go to Blogger Dashboard>> Template>> Edit HTML.
  • Find below code in your template.
 ]]></b:skin>
  • Now, simply paste the following code above it.
 .tooltip em {
min-width: 110px;
text-align: center;
font: italic;
position: absolute;
z-index: 4;
background: #474747;
color:#fff;
border: solid 1px #ccc;
padding: 4px 1px;
white-space: nowrap;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-transition: all 1s ease 0.5s;
-webkit-transition: all 1s ease 0.5s;
-o-transition: all 1s ease 0.5s;
top:5px;left:50%;margin:-40px;
}
.tooltip em:after {
content: &quot; &quot;;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 5px solid #999;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
bottom: -5px;
left: 50%;
z-index: 1;
}
.tooltip:hover &gt; em {
display: block;
}
After it, click on “Save Template” and you’ve successfully done it.

Using CSS Tooltip in Posts or Pages!

  • Go to Blogger Dashboard>> Posts>> Create New Post.
  • Now Move to HTML section and paste any of below code, which one you want to use.

Use Below Code for Simple Text

 <div class='tooltip'>Your Hover Text<em>Your Simple Text</em></div>
  • Replace “Your Simple Text” with any text that appear before hover mouse on it.
  • Replace “Your Hover Text” with any text that appear after hover mouse on it.

Use Below Code for Links

 <a class='tooltip' href="Your-link"> Your Linking Text<em>Your Simple Text</em></a>
  • Replace “Your-link” with any link that you want to use in Tooltip.
  • Replace “Your Linking Text” with link text.
  • Replace “Your Simple Text” with some text on that you want to add link.

Use Below Code for Images

 <div class='tooltip'> <img src="Your-img-URL"><em>Your Simple Text</em></img>
  • Replace “Your-img-URL” with any image that you want to display.
  • Replace “Your Simple Text” with some text that you want to display, before a user mouse hover on it.
After making your desired changes, publish your posts and that’s all.

From The Editor's Desk!

We hope above method will help you to add Tooltip in blogger by using CSS and JQuery methods hover if you’ve faced any problem while using above codes in blogger then feel free to ask us in comment section and also share our work with your friends.
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks