Rectangular Tooltips Script

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 gets narrower and taller as you approach the edge. Just to compare we used the code <span title="regular tooltip" alt="regular tooltip" style='color:blue'>regular tooltip</span> to display a normal stationary rectangular tooltip that is run by the browser just because it finds normal title text in the span, which could also be an image or link. Such things are good for website search engine optimization as well.

The Rectangular Tooltips 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.

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 texttip 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 sent in the parameter of this function which was called by the onmouseover event in the page text. 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.

<html>
<head>
<style type="text/css">

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

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

</style>
<SCRIPT LANGUAGE="JavaScript">

</script>

</head>
<BODY SCROLL="auto" BGCOLOR="#FFFFFF">

<center><h1>Rectangular Tooltips That Follow the Cursor</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 <span title="regular tooltip" alt="regular tooltip" style='color:blue'>regular tooltip</span> 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('You will see my great and wonderful tooltip right here');" 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>
</div>

</body>
</html>

Free Personal Status Boards (PSB™)

Rectangular Tooltips Script