Home      Products & Services      Contact Us      Links

WebHatchers will design & develop your site for you.

Website Menu Heaven: menus, buttons, etc.

Send us your questions.

site search by freefind

SEO, Google, Privacy
   and Anonymity
Browser Insanity
Popups and Tooltips
Free Website Search
HTML Form Creator
Buttons and Menus
Image Uploading
Website Poll
IM and Texting
   or Not MySQL
Personal Status Boards
Content Management
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs

Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement

Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

Rectangular Tooltips Getting Data from .js File

Tooltips don't need to be fancy. But having tooltips move is a nice change from the plain old stationary ones. In the code below, the rectangular tooltip moves with the cursor and the box would get narrower and taller as you approach the edge if the tooltip was long enough. Normal stationary rectangular tooltips are run by the browser when it finds normal title text in a span, image or link. Such things are good for website search engine optimization as well.

In the script below, we will load an external .js file called data.js, and in the body tag, the tooltip triggering words will be between span tags with onmouseover="tooltip(0);" or onmouseover="tooltip(1);" or onmouseover="tooltip(2);" actually in the span tags as events running a function: tooltip(). Note the numbers used as parameters. These are array element numbers. In the function, the code t.innerHTML = Cars[thetooltip]; will get the array element values and put them into the tooltip text via innerHTML.

The Rectangular Tooltips Getting Data from .js File test page will work on Windows IE 5.5, 6, 7, 8, Safari, Chrome, Firefox, Opera, and . . . that's all we tested. Tooltips will just pop up, and follow the cursor. If you want balloon tooltips that follow the cursor, you'll want Balloon Tooltips That Follow the Cursor, and if you want stationary balloon tooltips, you'll want Balloon Tooltips. The Rectangular Tooltips script does not get data from anywhere—the data is simply sent as a function parameter.

Now—on to the script code:

The CSS styling has centered text. One need not center the text. Align it left if you like. One need not use border-bottom:1px solid blue on the words that pop up a tooltip, but you will want to do something—at least color the text—so they know there's a tooltip waiting for them if they hover the trigger words with the mouse cursor.

Next we define the e() function to initialize the created-on-the-fly div element box, which starts offscreen. Here we are using innerHTML to get an empty string into the box. Note that there is no reason that you really need to use createElement and appendChild to make a div on the fly and put it into the DOM flow. It's just as easy to have there be an offscreen div and change its absolute positioning to near the tooltip triggering words when the tooltip needs to appear. That's what we did with Balloon Tooltips. The reason the display property is set to none is that we are not yet ready to position the tooltip. We need to get the cursor position first.

Then comes the wherecursor() function, which figures out exactly where the cursor is so it can use these coordinates to figure out where to put the tooltip text. The CSS display property is either none (invisible and not in the flow) or block (visible and in the page flow) in our code. The 4 lines with all the e characters are standard cross-browser mouse cursor reading. The tooltip box with the id tooltip will also get positioned at this time, with its horizontal position adjusted using xx and with its vertical position adjusted using yy.

In the tooltip() function, if the tooltip div is not around, the e() function will create it and get the tooltip initialized, put in the flow, and created as empty via innerHTML. In this function, the innerHTML method is used to put into the tooltip the tooltip text since the array element number is sent in the parameter of this function which was called by the onmouseover event in the page text. (Recall that the external data.js file has already been loaded.) And the tooltip text div will get its CSS display property changed from none to block, but placed offscreen, since we don't have enough data to determine its onscreen placement at this juncture, since the tooltip() function runs before the wherecursor() function. Then we register an event handler to an element, that is: to make sure a certain script runs when a certain event takes place on a certain HTML element. The element is document, the event is onmousemove, and the script is wherecursor. The reason there is no () after the script—a function—is because then the function would be executed and its result would be registered to onmousemove. This is not what we want, we merely want the function to be executed when the event takes place. Note that function wherecursor(e) has an e as parameter even though no parameter was sent. The e is for event. IE (and most other browsers) doesn't want or need the e—it makes its own using window.event. But Firefox requires it and cannot deal with window.event. This is seriously weak, we believe. Firefox uses the parameter e for cursor position determination, whereas IE and others use window.event.

Then we have the bye() function in which the tooltip div gets un-displayed via the display property getting changed to none, so it can no longer be seen since it is no longer around. This is run when the user leaves the word that trips the tooltip. It's run by the mouseout event.

Now we declare a div, which is just full of words with the special span tag in it. This tag has the onmouseover and onmouseout events to popup and disappear the tooltip.

<script language="javascript" src="data.js"></script>
<style type="text/css">

#tooltip {
padding: 4px;
background-color: #eee;
border: 1px solid #000;
text-align: center;
font-size: 13px;

span.tip {border-bottom:1px solid blue;color:blue}


var x=0;
var y=0;
var xx = 12;
var yy = 10;

function e(i){
var d = document.createElement('div');
d.id = i;
d.style.display = 'none';
d.style.position = 'absolute';
d.innerHTML = "";

function wherecursor(e){
var t = document.getElementById('tooltip');
if (!e) var e = window.event;
if (e.pageX){x = e.pageX;y = e.pageY;}
else if (e.clientX){x = e.clientX + document.body.scrollLeft;y = e.clientY + document.body.scrollTop;}
t.style.left = (x+xx) + 'px';
t.style.top = (y+yy) + 'px';}

function tooltip(thetooltip){
if(!document.getElementById('tooltip')) e('tooltip');
var t = document.getElementById('tooltip');
t.innerHTML = Cars[thetooltip];
t.style.display = 'block';
t.style.left = '-1999px';
document.onmousemove = wherecursor;}

function bye(){document.getElementById('tooltip').style.display = 'none';}

// -->


<center><h1>Rectangular Tooltips Getting Data from .js File</h1></center>

<div id='abc' style='background-color:#fff;z-index:99;position:absolute;left:50px;top:100px;width:900px;'>
<p><b>Blah Blah Blah Blah Blah Blah</b> Here is a bunch of dumb text and you can hover the word <span class="tip" onmouseover="tooltip(0);" onmouseout="bye();">tooltip</span> to see the tooltip come up. <b>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah.</b> Here is a bunch of dumb text and you can hover the word <span class="tip" onmouseover="tooltip(1);" onmouseout="bye();">tooltip</span> to see the tooltip come up. <b>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah.</b> Here is a bunch of dumb text and you can hover the word <span class="tip" onmouseover="tooltip(2);" onmouseout="bye();">tooltip</span> to see the tooltip come up. <b>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah.</b></p>


The data.js file is simply this:

var Cars=new Array("Saab","Volvo","BMW");