Tool Tip Information Bubbles For Text And Image Links




| 2 comments

In this post we will see how to add a great looking message bubble to your links.The message bubble will contain any message you choose and can be added to both text links and image links.In a post published last March i showed you how to use the title tag to give information about links to readers but the tool tip goes much further.



information bubble for hyper links

Preview And Demo

Below you can see a screenshot of a link with the tool tip message



To see the live working example of the text and image links follow this link - Demo of tool tip

How To Add Tool Tip Bubbles To Your Links

Step 1. In your dashboard click 'Layout' > 'Edit Html'

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 3. Paste the following code Directly Above / Before </head>

<style type='text/css'>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sv_TE02nC2I/AAAAAAAAALU/RJP8dN5W30s/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/Sv_TISo06uI/AAAAAAAAALc/9dj1-t3hN6o/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sv_TE02nC2I/AAAAAAAAALU/RJP8dN5W30s/bubble.gif) no-repeat bottom;
}
</style><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>

Step 4. You now have the code added to your template to display the tool tips the next step is to add code to your links.

When you create a text link use this code :


<a href="URL HERE" class="tt">TITLE OF LINK HERE<span class="tooltip"><span class="top"></span><span class="middle">TOOL TIP MESSAGE HERE</span><span class="bottom"></span></span></a>


Example :

<a href="http://www.spiceupyourblog.com" class="tt">Spice Up Your Blog<span class="tooltip"><span class="top"></span><span class="middle">Go To Spice Up Your Blog</span><span class="bottom"></span></span></a>

When You Create An Image Link Use This Code :

<a href="URL HERE" target="_blank" class="tt"><img src="IMAGE URL HERE" /><span class="tooltip"><span class="top"></span><span class="middle">TOOL TIP MESSAGE HERE</span><span class="bottom"></span></span></a>


Example :

<a href="http://www.spiceupyourblog.com/" target="_blank" class="tt"><img src="http://2.bp.blogspot.com/_rKG-ziTSNUQ/S3MX6onabII/AAAAAAAAA80/vGCYOSiMuCQ/s320/blogger+black.png" /><span class="tooltip"><span class="top"></span><span class="middle">Go To Spice Up Your Blog</span><span class="bottom"></span></span></a>

Note - The code for the links is a little harder to use than regular hyperlinks so take you time and im sure you will get the hang of it !

Remember you can use the tool tip for any images on your blog not just in the posts, for example in the sidebars and footer.

Feedback

Will you use tool tip bubbles on your blog ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

2 comments:

  1. This is what I was looking for. Thank you so much. Although the finished tooltip effect I have looks very different than your example after I modified it to match my needs, I still really appreciate the starting point and the valuable knowledge I gained through the modification process.

    ReplyDelete
  2. This is great unless you are browsing on a tablet - which don't have anything to hover with !

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us