Seeing as I tout myself as a UI Web Designer/Developer I decided to actually post something that is relevant to my “field”. I don’t really use this script that much myself, not because it’s not functional, just that I haven’t really had any projects that could benefit from it.
So what is it already?
It’s a simple tool tip script written in JavaScript (or DHTML if you will). Basically when your user mouses over a specified link a tool top will be displayed. You’ve seen this kind of script before, it’s actually pretty hard NOT to see it in use in today’s web world. I got tired of the regular “box” look and made it a bit more “Web 2.0″. Anyways, here comes the code.
All files are available in .rar format here and are free to download. Below I will explain the different aspects of the code and how to implement it.
The meat & potato’s: The JavaScript.
function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}
function hideToolTip()
{
document.getElementById('bubble_tooltip').style.display = 'none';
}
There really aren’t customizable variables in there, and I wouldn’t recommend changing anything unless you have a working knowledge of JavaScript. Make sure you include the JS file in the <head> of your document!
The customizable part: CSS.
#bubble_tooltip{
width: 147px;
position: absolute;
display: none;
}
#bubble_tooltip .bubble_top{
background-image: url('../images/bubble_top.gif'); /*DEFINE THIS PATH!!! */
background-repeat: no-repeat;
height: 16px;
}
#bubble_tooltip .bubble_middle{
background-image: url('../images/bubble_middle.gif'); /*DEFINE THIS PATH!!! */
background-position: bottom left;
padding-left: 7px;
padding-right: 7px;
}
#bubble_tooltip .bubble_middle span{
position: relative;
top: -8px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size: 11px;
}
#bubble_tooltip .bubble_bottom{
background-image: url('../images/bubble_bottom.gif'); /*DEFINE THIS PATH!!! */
background-repeat: no-repeat;
background-repeat: no-repeat;
height: 44px;
position: relative;
top: -6px;
}
Add the above CSS into your pre-existing CSS file. Modify the colors, font face, font size, etc… Make SURE you upload the image files to a specified directory and make sure your CSS reflects that.
Now implement the tool tip in your page. This can be used in an anchor tag or a span tag. I’ve included examples of both.
Using it with an anchor tag:
<a href="page.html" onmousemove="showToolTip(event,'This is where your text will go. Change at will!');return false" onmouseout="hideToolTip()">Focus Word</a>
Using it with a span:
<span class="tooltip_text" href="page.html" onmousemove="showToolTip(event,'This is where your text will go. Change at will!');return false" onmouseout="hideToolTip()">Focus Word</span>
There you have it.