Creating Tooltips

Phpnewbie23 · February 6, 2009

Hi Guys

I would like to create tooltips for some images i have. For example:

image (green tick) tool tip (backup completed).

I have seen a few of java examples and not sure if you can but both together does anyone know how to or can point me in the right direction please.

Kind regards

James

ScotDiddle · February 6, 2009

Phpnewbie23,

The best there is: http://www.bosrup.com/web/overlib/

Fully customizable....

Scot L. Diddle, Richmond VA

RichardRotterdam · February 6, 2009

I think you mean javascript examples. Javascript is not the same as Java.

You can combine images with tooltips just fine. You can even do it using only CSS

Phpnewbie23 · February 6, 2009

Hi Scott Diddle

Have you used overlib before i am trying to integrate it into my code i have follwed the documentation but the tooltip does not appear.

This is my code.

f ($remarks=="Backup Completed Partially.")
echo "<td bgcolor=$row_color align=center><small><img src='./images/warning-icon.gif' align='center'<a href='javascript:void(0);'onmouseover='return overlib('$remarks).',STICKY, MOUSEOFF);'onmouseout='return nd();'>More Info</a></small></td>";

Cheers

Phpnewbie23 · February 6, 2009

Hi Djkat

Sorry yes i ment Java script. but would it matter if i wanted the tooltip text to ocome from a php varible.

Cheers James

RichardRotterdam · February 6, 2009

It doesn't matter at all. Javascript is (in your case) client side it all happens in the browser. And PHP is serverside which your browser never gets to see. So you're safe

ScotDiddle · February 6, 2009

Phpnewbie23,

Like this:

	

<?php

    if ($remarks == "Backup Completed Partially.");
       echo "<td bgcolor=$row_color align=center><small><img src='./images/warning-icon.gif' align='center'<a href=\"javascript:void(0);\" onmouseover=\"return overlib('$remarks',STICKY, MOUSEOFF);\"> \n";

?>

or, a little fancier :

 

<?php

  if ($remarks == "Backup Completed Partially.") {
    echo "<td bgcolor=$row_color align=center><small><img src='./images/warning-icon.gif' align='center'<a href=\"javascript:void(0);\" onmouseover=\"return overlib('$remarks', WIDTH, 166, HEIGHT, 10, WRAP, OFFSETX, 35, OFFSETY, 15, FGCOLOR, '#F6F9F9', BGCOLOR, 'GREEN',  NOBORDER, VAUTO);\"> \n";
  }

?>

Also, don't forget to include the requisite overLib div statment just after the <body> tag.


  <body>

<?php 

    echo   "<div id=\"overDiv\" style=\"position:absolute; visibility:hidden; z-index:1000;\"></div> \n";

?>

NOTE:

I always use opening / closing brackets for IF statments, even if there is only one staement exeuted... It makes you intent abundantly clear, and when you have to change something in the future related to your IF statement ( AND YOU WILL ) doing so will keep you out of trouble.

Let us know if the new examples work...

Scot L. Diddle, Richmond VA

ScotDiddle · February 6, 2009

Phpnewbie23,

The above code was not tested...

Here is an HTML page with overLib that I did test... ( change the img src= ... statement back to : src='./images/warning-icon.gif'

Scot L. Diddle, Richmond VA


<html>
<head>
	<!-- overLib -->

	<script type="text/javascript" language="JavaScript" src="javascript/overlib.js"></script>   
	<script type="text/javascript" language="JavaScript" src="javascript/overlib_positioncap.js"></script>   
	<script type="text/javascript" language="JavaScript" src="javascript/overlib_centerpopup.js"></script> 
	<script type="text/javascript" language="JavaScript" src="javascript/overlib_followscroll.js"></script>  


</head>

<body>

<?php


    echo  "<div id=\"overDiv\" style=\"position:absolute; visibility:hidden; z-index:1000;\"></div> \n";

    $remarks = "Backup Completed Partially.";	


    if ($remarks == "Backup Completed Partially.") {
    	
        echo "<td bgcolor=$row_color align=center><small><img src='images/xyz.jpg' align='center'<a href=\"javascript:void(0);\" onmouseover=\"return overlib('$remarks',STICKY, MOUSEOFF);\"> \n";
    }
?>

</body>

</html>

ScotDiddle · February 6, 2009

Phpnewbie23,

Notice the JS : <script type="text/javascript" language="JavaScript" src="javascript/overlib_positioncap.js"></script>

This is from an unofficial plugin available here:

http://overlib.boughner.us/plugins/positioncap_commands.html

Using this plugin, with the DATA or SRC parameters which this plugin supplys, you can now pass

a complete HTML or PHP page to overLib...

Vis:

    
    <script type="text/javascript">
    
    overLibForMetricDisplay = true;
    
    <?php 
    
    	switch ($tableName) {
    		
			...

			case 'Hourly Tran Count By SysID' :

				if (overLibForMetricDisplay) {
					return overlib('', DATA, 'include/overLibTableName.php?table=hourly_tran_count_by_sysid', WIDTH, 460, HEIGHT, 90, WRAP, FIXX, 120, FIXY, 200, FGCOLOR, '#f0F9F9', BGCOLOR, 'GREEN', NOBORDER, VAUTO, MOUSEOFF); 
				}

			break; 

			...

    	} // END Switch
    	
    ?>
    	
    </script>

Where, 'include/overLibTableName.php' looks like the following:

( Substitute you own overLib('', DATA, 'someFileName.php' ...); parms )

 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<title>
	 Hourly Tran Count by SysID
</title>


<link rel="stylesheet" href="../css/UpgfMetrics.css" />

</head>

<body>

<font color=\#205E75"> 

<div id="overDiv" style="position: absolute; visibility: hidden; z-index: 1000;"></div> 

	<table border="0"> 



<?php

			$overLibTable = $_GET['table'];

			// Turn on to test format...
			// $overLibTable = 'hourly_tran_count_by_sysid';

			if ( (isset($overLibTable)) && ($overLibTable != NULL) ) {

				switch($overLibTable) {

					case 'hourly_tran_count_by_sysid' :

					$rows = <<<EOR

						<tr> 
							<td valign="top">  
								<img src="../images/transactionGraphHomeTabImage.png" >
							</td> 						

							<td valign="top">  
							  Hourly Tran Count by SysID   
							<br /> 
								<br />Line Graph of transaction counts, per choosen SysID(s), for 24 Hours.   

							</td>

						</tr> 	

EOR;
					break;	

					case 'tran_response_time_by_sysid' :

					$rows = <<<EOR

						<tr> 
							<td valign="top">  
								<img src="../images/secondaryLineGraph.png" >
							</td> 						

							<td valign="top">  
							  Hourly Tran Response Time By SysID  
							<br /> 
								<br />Line Graph of transaction response averages, per choosen SysID(s), for 24 Hours.   
								<br /><br />
							</td> 

						</tr> 	

EOR;
					break;											

					case 'tran_count_per_hour_by_tranid' :

					$rows = <<<EOR

						<tr> 
							<td valign="top">  
								<img src="../images/transactionGraphHomeTabImage.png" >
							</td> 						

							<td valign="top"> 
								  Tran Count per Hour by Tran ID   
								<br /> 
								<br />Line Graph of transaction counts, per choosen Tran ID, for 24 Hours.   
							</td> 

						</tr> 	

EOR;
					break;

					case 'hourly_tran_cpu_utilization_by_sysid' :

					$rows = <<<EOR

						<tr> 
							<td valign="top">  
								<img src="../images/not16by16.gif" >
							</td> 						

							<td valign="top"> 
								  Hourly Tran CPU Utilization By SysID   
								<br /> 
								<br />Under Construction   
							</td> 

						</tr> 	

EOR;

					break;

					case 'tran_count_by_tranid' :

						$rows = <<<EOR

						<tr> 

							<td valign="top">  
								<img src="../images/brownBarIcon.png">
							</td> 
							<td valign="top">  
							  Tran Count By TranID   
							<br /> 
								<br /> Bar Graph of individual transaction counts for a specified date, per choosen SysID(s).   

							</td>

						</tr> 	

EOR;

					break;

					case 'tran_response_time_by_tranid' :

						$rows = <<<EOR

						<tr> 
							<td valign="top">  
								<img src="../images/sgBarIcon.png" >
							</td> 		

							<td valign="top">  
							  Tran Response Time By TranID<br><font color="#F6F9F9">  </font>   
							<br /> 
								Bar Graph of individual transaction response time average, for a specified date or date-range.   

							</td>
						</tr> 	

EOR;

					break;


					case 'tran_cpu_utilization_by_tranid' :

					$rows = <<<EOR

						<tr> 
							<td valign="top">  
								<img src="../images/not16by16.gif" >
							</td> 						

							<td valign="top"> 
								  Tran CPU Utilization By TranID   
								<br /> 
								<br />Under Construction   
							</td> 

						</tr> 	

EOR;

					break;						

					default :

						echo "	<img src=\"../images/not16by16.gif\" > \n";
						echo "<font color=\"blue\">overLib Table name is invalid ( <font color=\"red\"> $overLibTable </font> )</font><br />    See 'javascript/UpgfDHTMLMenuGenerator.js' around line 1018 <font color=\"blue\">\n";

						exit;

					break;


				}

				echo $rows;

			}
			else {

				if (!isset($overLibTable)) {
					$overLibTable = '*** Not Set ***';
				}

				if ($overLibTable == NULL) {
					$overLibTable = '*** NULL ***';
				}		

  					echo "	<img src=\"../images/not16by16.gif\" > \n";
				echo "<font color=\"blue\">Table name required for overLib display is</font><font color=\"red\"> not set</font/><br />    See 'javascript/UpgfDHTMLMenuGenerator.js' around line 1018 <font color=\"blue\">\n";

				exit;
			}

?>



	</table>

</body>

</html>

This PHP program and the overLib call produces the green box below the menu drop-down seen in the following image:

Ya gotta love overLib !!!!

Scot L. Diddle, Richmond VA

Phpnewbie23 · February 9, 2009

Cheers Scot L. Diddle you have given me exactly what i wanted brilliant brilliant ;D

just another small question how the hell do you get rid of the blue box around the image.

Thanks again Scot

unkwntech · February 9, 2009

<img ... border="0"> will get rid of that border for ya.

Phpnewbie23 · February 9, 2009

Cheers unkwntech.

ScotDiddle does the onmouseout="return nd(); mean on mouse out is gets rid of tool tip mine seem to be sticking until i refresh the page.

Cheers James

unkwntech · February 9, 2009

On second thought a better way to get rid of the border on the images would be to add this to your <head>

<style type="text/css">
img
{
     border: 0px;
}
</style>

As this will apply it to all the images and is much easier then adding border="0" to all the img tags.

Phpnewbie23 · February 10, 2009

One small problem i have found that it does not work in IE7 or IE8 only Mozilla In IE7-8 the images don't appear at all with the tooltip.

Sign In

Creating Tooltips

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information