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 forcing the user to take an action he may find annoying. We know that being hit with popups that we're forced to deal with has annoyed us 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 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 below, the rectangular tooltip tester pops up a popup with text and a link in it when you hover the button. 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 button (which could just as easily be a text word 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 is self-closing-rectangular-tooltips-that-include-links.html. 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(s).

In the script below, we will create a button—which could just as well be an image or a word 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 gets its display property set to none via CSS. 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 self-closing-rectangular-tooltips-that-include-links.html will not give any such problems, however. They are repeatable and feel free to fire the event a zillion times.

Other div and 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.

Now—on to the script code:

We define the setup_timer() function, which is the one the mouseover event runs. It sets the counter value to 7, then runs the stopcounter() and start_timer() functions to get the action going. Note that right off the bat, the stopcounter() function sets the CSS display property to block so the popup div is now visible and real. 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 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 button 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 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 changing the CSS display property here rather than changing the CSS left property—an equally popular method. Note that the CSS display property being set to none is the first thing to be defined in the body area when we declare the actual div.

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.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Popup DIV Timer</TITLE>
<meta name="description" content="Popup DIV Timer">
<meta name="keywords" content="Popup DIV Timer,reusable Popup DIV Timer,script,tooltips,rectangular tooltips,javascript, dhtml, DHTML">
<SCRIPT LANGUAGE = "JavaScript">
<!--
var q;
var s = null;
var timer_on = false;

function setup_timer(){q=7;stopcounter();start_timer();}

function stopcounter(){
document.getElementById('tooltip').style.display='block';
if(timer_on){clearTimeout(s);}
timer_on=false;}

function start_timer(){
if (q==0){stopcounter();bye();}
else {q=q-1;timer_on=true;
s=self.setTimeout("start_timer()",1000);}}

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

//-->
</SCRIPT>
</HEAD>
<body>
<div id='tooltip' style='display:none;background-color:#ccc;border:1px solid black;z-index:99;position:absolute;left:250px;top:200px;width:350px;
padding:10px'>
<p><b>Click button to get a div that stays 7 seconds</b><BR><BR><a HREF="http://www.google.com">Link (optional)</a></p></div>
<FORM>
<INPUT TYPE=BUTTON VALUE="Temporary Div" onmouseover = "setup_timer()">
</FORM>
</body>
</html>