image links

Tool Tip Information Bubbles For Text And Image Links

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.

big_tooltip_control_logo

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

tool tip

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.

Tool Tip Information Bubbles For Text And Image Links
Informative
89
Useful
81
Easy To Read
77
Fact
82
Reader Rating0 Votes
0
82