EeepZork!» DHTML http://labs.elektrikcoma.com/blog The unofficial offical comaLABS blog. Fri, 06 Nov 2009 07:24:34 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 a little “Web 2.0″ on this chilly monday. http://labs.elektrikcoma.com/blog/code/a-little-web-20-on-this-chilly-monday/ http://labs.elektrikcoma.com/blog/code/a-little-web-20-on-this-chilly-monday/#comments Mon, 16 Feb 2009 20:25:41 +0000 Mikael C. Fritts http://labs.elektrikcoma.com/blog/?p=36 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.

]]> http://labs.elektrikcoma.com/blog/code/a-little-web-20-on-this-chilly-monday/feed/ 0