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 MySQL Database 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 get-mysql-data.php to get the tooltip data by accessing a MySQL database table. 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 created in the get-mysql-data.php file from the name field values in the MySQL db. The way we get this data is not by loading any file but by reading it from the db on the server using PHP and Ajax. In the Ajax() 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.

There is no test file for the script since that would involve the security vulnerabilities of having outsiders access our MySQL databases, but it is essentially the same script as the Rectangular Tooltips Getting Data from PHP File Using Ajax script, except it uses a PHP file to get its data not from PHP arrays but from a MySQL db. 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.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 JavaScript 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.


<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;
var thetooltip = 0;
var t;

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

function wherecursor(e){
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');
t = document.getElementById('tooltip');
t.style.display = 'block';
t.style.left = '-1999px';
document.onmousemove = wherecursor;}

function Ajax(thetooltip){
var tm = new Date().getTime();
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
if (xmlhttp.readyState==4 && xmlhttp.status==200){

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

// -->


<center><h1>Rectangular Tooltips Getting Data from MySQL Database 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>


The get-mysql-data.php file is simply this:





$res = mysql_query("SELECT name FROM name_of_db_table") or die(mysql_error());
while ($row = mysql_fetch_row($res)) {
array_push ($a, $row[0]);

echo $a[$num];


The PHP code starts with including config.php, the file that has the various magic words for accessing the MySQL database, and we'll pretend that the db table is named name_of_db_table. The query string in the Ajax function in the browser page script above will send the array number as 'num'. We create a PHP array $a. We query the db for the data in the name field and push it into our new PHP array using the PHP array_push() function. We use the tooltip array number, $num, as the array element number and echo the array element value back to the waiting Ajax() function in the browser.

Note that we could—perhaps should, because of the possibility of a db table edit—use db table ID numbers instead of creation of an array. This would be $res = mysql_query("SELECT name FROM name_of_db_table WHERE ID='$num'") and echoing the result. But since ID numbers start from 1, we'd either use onmouseover="tooltip(1);" and onmouseover="tooltip(2);" and onmouseover="tooltip(3);" instead of onmouseover="tooltip(0);" and onmouseover="tooltip(1);" and onmouseover="tooltip(2);" on our browser page script or add a 1 to $num here in this PHP file.