You Are Here : Home » , , » How to Create Tooltip Effect for Links in Blogger

How to Create Tooltip Effect for Links in Blogger

Hey! Today we are going to discuss about tooltip and how to implement tooltip on blogs. It is very interesting feature. It will whenever mouse cursor will be hovered on links or image that contains link. It is a very easy tutorial and anyone can add tooltip effects in links. In this post I will show you how to create tooltip effect for links in Blogger. I have shared many Interesting Blogger Tricks and this one is one of them. This tooltip effect is based on CSS and Jquery.
This tooltip effect for Blogger doesn't contains so much Scripts and it is very easy to add this in your Blogger blog with just little understanding of HTML codes. One without the knowledge of Scripts and HTML can also add this as you only have to do some copy/paste of the codes given in this post. I will tell you step by step how to add tooltip effect in links. Let's continue the tutorial.

How to Create Tooltip Effect for Links in Blogger
ToolTip Effect for Blogger
First of all make a Backup of your template. It will really help you if by chance you destroy your template. It's always a good idea to keep a backup that you can use it in emergencies. Now after making Backup of your Blogger Template follow these easy steps.
  • First of all Go to Blogger Home and Sign in with your Google/Blogger account if have not signed in yet.
  • Now Click on the blog on which you want to add this Tooltip effect.
  • After that Click on the Template on Dashboard.
  • Now you will need to click on Edit HTML which is located below live preview of your Blog.
  • Now search for the tag given below.
]]></b:skin>
  • Add the following line of code/CSS given below just above/before ]]></b:skin>. Copy the code by clicking Copy Code From Here. It will open the code in new window.
div#tooltip {
 /* Functional */
 position: absolute;
 z-index: 10;
 /* Styling */
 background: #292832;
 color: #fff;
 padding: 10px;
 -webkit-box-shadow: 0px 0px 7px #B4B4B4;
 -moz-box-shadow: 0px 0px 7px rgb(180, 180, 180);
 box-shadow: 0px 0px 7px #B4B4B4;
}
Change the value of hex color in line 6 with the background color which you want to set as background color for your tooltip. Need to change the text color on your tooltip effect for Blogger than change hex color value in line 7 with your preferred text color. You will need to write the color in hex or HTML format. Try to search engines for your color codes.
  • After adding the above CSS code in proper place search for the tag given below.
</head>
  • Great! Now add the following Script before/above the closing head tag (</head>).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.dropbox.com/s/epm4v7ictcpf9nj/tooltip.js?dl=1"></script>
The first line of code is Jquery. You are required to remove this if your blog already contains this Jquery. And the line of code in line 2 is the link of Script that will create Jquery Tooltip effect in your Blogger blog. If you want to host the Scripts yourself than copy the script given below and save it as .js format.

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    function(e) {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('<div id="tooltip"></div>')
      $("div#tooltip").text(tooltip);
    },
     function(e) {
      $("div#tooltip").remove();
    }
  );
  $("[data-tooltip]").mousemove(function(e) {
    $("div#tooltip").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });
});
  • Now you will need to add data-tooltip="The Tool Tip Text" to the link on which you want the tooltip effect. Just look on the steps below to know where to add this.
  • Open your Blogger post editor and add a link. After adding your link switch to HTML mode. Now search for the link you created now. You can search by Clicking CTRL+F. Link will look something like below.
<a href="http://www.example.com">Example Link</a>
You will need to add data-tooltip="TOOLTIP TEXT HERE". after a. See the link HTML below to know how to do this.
<a data-tooltip="This is a Example Link" href="http://www.example.com">Example Link</a>
Just replace the text in Red with the text which you want to make appear whenever your users will hover on that link. That's it! You have now successfully created the tooltip effect for your Blogger blog. Go to post and hover over the link to see how it looks.
If you want to add tooltip effect on images than you can also do that. Like I said above you will need to add data-tooltip="Texts Here" on images links. You will need to switch to HTML mode and add that tag. You can see the image below to get an idea about adding this effect on images.

How to Create Tooltip Effect for Links in Blogger

Isn't that too easy? Yes that is very easy. If you face any problem in inserting the tooltip effect on your Blogger blog than feel free to ask me or drop a comment below. I will be happy to help you.

Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

2 comments:

  1. What's up to every one, because I am really keen of reading this website's
    post to be updated daily. It includes good stuff.


    My page: easy twitter followers

    ReplyDelete
    Replies
    1. Thank's for your comment. But if you are to post a link next time than please add a link in your comment which is related to this site in anyway. You can read the Privacy Policy from the link given in footer navigation bar.

      Delete

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top