Rectangular Tooltips That Close Automatically

Rectangular Tooltips That Close Themselves
(Self-Closing and Automatic) — Including Links

Tooltips don't need to be fancy. But having tooltips or other types of div popups that automatically close after a certain set amount of time can be very advantageous. If you wish to have a text link, image link, or both in your popup, and the popup is run by an onmouseover event, the popup will disappear as the user tries to get to the link to click it because he has onmouseout-ed which usually is set as the div closing event. But if you instead put an X in the corner and/or the word "close," you are making the user take an action he may find annoying. We know that being confronted with popups that we are forced to deal with has annoyed us unmercifully on countless websites, and we are sure you have had similar experiences. So you can see why we wrote the code below. It solves both of these problems. The popup stays for 7 seconds, giving you the right amount of time to click the link, but also allowing you to ignore it—it takes care of itself.

In the test code for self-closing-rectangular-tooltips-that-include-links.html below, the rectangular tooltip tester pops up a popup with text and a link in it when you hover or scim over the underlined word. It stays for 7 seconds and then goes away—unless you click the link before the 7 seconds are up. It does not matter if you stay over the word (which could just as easily be a button or phrase or an image). The div will stick around and there is no onmouseout event anywhere to say differently. So going over to the link and using it to get somewhere is quite possible. And there is no X or "close" in the corner, since the div box takes care of itself—it's self closing. If you need a cross-browser script that lets you use a self closing (7 seconds) tooltip with a link in it, here it is. It even lets you build a link and some styled text simply by putting this info in the parameters of the function which the mouseover event runs when you hover the span-tag-enclosed tooltip target word.

In the script below, we will use a span tag surrounding a word—which could just as well be an image or a button or a sentence—which we'll stick a mouseover event in. This will, when hovered or skimmed over, run the JavaScript function setup_timer(). This gets the counter and timer going. The timer makes 1-second time periods and the counter counts down from 7, so the net effect is putting a 7-second timer on your popup div. When the action begins, the div gets its display property set to block, and when the 7 seconds is done, the div gets its display property set to none. None means GONE. When the page loads, the div popup doesn't exist yet. And that's that.

The setTimeout() function, if used on a page in its simplest form, will time something nicely once, but balk the second time the event fires even if you use the clearTimeout() function. But in the form in our script, the timer will time the action as many times as you like. Using setInterval() and clearInterval() in their simplest forms yields similar results. Online forums mentioned these problems and people suggested the clearing functions, but the person with the problem said it didn't help. The script here and in popup-div-timer.html will not give any such problems, however. These events, timers, and counters are repeatable and feel free to fire the event a zillion times.

Other tooltip popup related links: The Rectangular Tooltips Getting Data from .js File and the Rectangular Tooltips Getting Data from PHP File Using Ajax test pages will work on Windows IE 5.5, 6, 7, 8, Safari, Chrome, Firefox, Opera, and . . . that's all we tested, and the other scripts in this paragraph as well as the script below will work on these as well. Tooltips will just pop up, and follow the cursor in the 2 scripts just mentioned. 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, like in the script below.

Now—on to the script code:

We define some styles and a few variables, then declare the setup_timer() function, which is the one the mouseover event runs. It sets the counter value to 7, then runs the tooltip(), stopcounter() and start_timer() functions to get the action going. Notice that if q is greater than 0, the function quits. Since q is the counter, once it reaches 0 the action is done.

Note that right off the bat, the tooltip() function sets the CSS display property to block so the popup div is now visible and real, but the left property gets set to offscreen positioning since we are not yet ready to display the div. The innerHTML method is used to grab the values sent as parameters in the function argument and put them into the created-on-the-fly div popup.

Next the wherecursor() function is run to grab the cursor coordinates and use these to determine where to put the tooltip popup. Note the strange codes document.onmouseover = zip; and when you find the zip() function you find function zip(){return;}. It does zip, nada, bupkiss. So why have it? It turns out that the tooltip function has a line document.onmouseover = wherecursor; which runs the wherecursor() function (by setting the event handler to that function) to get coordinates, but we want the div popup—which follows the cursor—to stay still once it pops up. So once the coordinates of the cursor are found, we need to fix it so the event handler is zip() instead of wherecursor(), and since the mouseover event tries to keep running setup_timer() and restart the action, we prevent it with the if(q>0){return false;} code in setup_timer(), since if the timer isn't done and q isn't zero and the popup div hasn't vanished yet, we need to do nothing—letting the user either click a popup div link or ignore the popup and allow the popup to simply vanish automatically.

Back at the setup_timer() function, once the tooltip() function has popped up the popup, the stopcounter() function clears the timer. Then the start_timer() function counts down the counter variable by 1 and setTimeout() is used to create a 1-second time interval. The start_timer() function keeps running itself and decrementing the counter until the counter reaches 0 at which time the stopcounter() function is run to clear the timer with the clearTimeout() function. Then the bye() function is run to set the CSS display property of the popup to none. The popup div is both gone and invisible—of course, how could it be anything but invisible if it's not there?! If you hover the underlined tooltip trigger word again, the event will fire again and the popup div will appear again ad infinitum.

It's just as easy to have there be an already created 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. But we used the method of creating the div on the fly here—an equally popular method.

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 counter hits 0.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<title>Rectangular Tooltips That Close Automatically—Including Links</title>
<meta name="description" content="Rectangular Tooltips That Close Automatically—Including Links">
<meta name="keywords" content="Rectangular Tooltips That Close Automatically—Including Links,Rectangular Tooltips That Close Automatically,self closing Rectangular Tooltips,Popup DIV Timer,reusable Popup DIV Timer,script,tooltips,rectangular tooltips,javascript, dhtml, DHTML">

<style type="text/css">

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

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

</style>
<script type="text/javascript">

</script>

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

<center><h1>Rectangular Tooltips That Close Themselves<BR>(Self-Closing and Automatic) — Including Links </h1></center>

<div id='abc' style='background-color:#fff;z-index:99;position:absolute;left:50px;top:200px;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="setup_timer('Link to Google','http://www.google.com','width:250px;color:red;font-size:16px','This is a ',' Think it is great? Boy oh boy I sure do! How cool it is!');">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 That Close Themselves(Self-Closing and Automatic) — Including Links

Rectangular Tooltips That Close Themselves
(Self-Closing and Automatic) — Including Links