Here is the code;

This script have a nice coding. You add a javascript file into header.php with a simple code. This javascript calls the content area and class and added tooltip to every link!

1. Add some code into header.php

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

Add this code before the wp_head tag. Also you define an id for the special tooltip area. For an example i write “content” into enable Tooltips area. But in fact i use this function in my Turkish blog site with a special area. The social bookmarks&follow area. Here is the some pictures from there. If you want to visit and test the tooltip click here. There an example with special area. You have to select your div id’s Go to next step!

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("social")};
</script>

2. Add this css code into your style.css

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

That’s all now upload this files and .js and bt.gif image. Also you can download this tooltip codes from this post! The original post!
Note: There is a file embedded within this post, please visit this post to download the file.

Related posts:

1. Build a Top Sliding Login Panel
2. Make Tabs for your Sidebar!
3. Highlight the Searched Text!