Rectangular Tooltips Getting Data from PHP File Using Ajax

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 read a PHP file called data.php to get the tooltip data. 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 for a PHP array found in the data.php file. The way we get this data is not by loading the file but by reading it on the server using Ajax. In the function, we run an Ajax script and the code t.innerHTML=xmlhttp.responseText; will take the retrieved array element value and put it into the tooltip text via innerHTML.

The Rectangular Tooltips Getting Data from PHP File Using Ajax 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. The Rectangular Tooltips Getting Data from .js File test page will do the same thing, except it loads a .js file into the browser as an external JavaScript file. With this method too, 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 the Ajax function that follows, 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 tooltip function which was called by the onmouseover event in the page text. This number will be used in reading the PHP array and getting the word that is the array element value corresponding to that array element number. 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.

The function Ajax() is where the Ajax operations are done. What is Ajax? AJAX means Asynchronous JavaScript and XML, but it isn't a programming language. It is a new way to use existing languages. When one uses Ajax, one is exchanging data with a server and updating parts of a web page, but without reloading the whole page! For a great example of Ajax in action, see http://www.w3schools.com/Ajax/ajax_aspphp.asp or
http://www.css-resources.com/Ajax-and-PHP-Based-Insult-Auto-Completer.html. Happily, one need not learn XML or even XHTML to use Ajax, although there's a whole ton one can do if one does learn those. But those are not of interest to us currently so let's stay with the problem at hand. Incidentally, Ajax can be on regular HTML or PHP pages—you need not go to XML or XHTML. So in this function, we first prepare a date and time variable for the simple reason that it will always be different. No, we are not drunk! We have no use for time here, but a great use for a unique value. Why? To avoid the curse of unwanted cacheing. It turns out that when using Ajax, because there is no page reload (Ajax's main purpose is avoiding page reloads) the browser keeps a cache of the page and your result can often be the saved result, not the new result. But if you put a unique value (tm, the date and time variable gotten from new Date().getTime() which is a prebuilt JS method that returns the time elapsed from January 1st, 1970 to the current Date instance, in milliseconds) into the query string sent to the PHP file in the xmlhttp.open() function, the cache-crazy browsers are fooled into thinking you are dealing with a new page, so no cache curse is placed upon you. Next, we make an xmlhttp request in one of two ways, depending on your browser flavor. The request is to let you send a query string to your PHP file on your server and sneak back into the current page with no reload, but with the results of your request, which you stick in your tooltip with innerHTML. Whatever the PHP file code echoes will be in the returned data. The order of the code in the Ajax script looks a bit like you get the result before you even ask the PHP file to come up with it. But, no, read it: "here's where I want the response to go once you go fetch it in the following PHP file."

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 Getting Data from PHP File Using Ajax</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>
</div>

</body>
</html>

The data.php file is simply this:

<?php

$num=$_GET['num'];

$a[0]="Anna";
$a[1]="Brittany";
$a[2]="Cinderella";

echo $a[$num];

?>

Free Personal Status Boards (PSB™)

Rectangular Tooltips Getting Data from PHP File Using Ajax