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.

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)

Step 3. Paste the following code Directly Above / Before

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 :

TITLE OF LINK HERETOOL TIP MESSAGE HERE

Example :

Spice Up Your BlogGo To Spice Up Your Blog

When You Create An Image Link Use This Code :

TOOL TIP MESSAGE HERE

Example :

Go To Spice Up Your Blog

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 ?