Phpnewbie23 Posted February 6, 2009 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/ Share on other sites More sharing options...
ScotDiddle Posted February 6, 2009 Share Posted February 6, 2009 Phpnewbie23, The best there is: http://www.bosrup.com/web/overlib/ Fully customizable.... Scot L. Diddle, Richmond VA Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-755888 Share on other sites More sharing options...
RichardRotterdam Posted February 6, 2009 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-755900 Share on other sites More sharing options...
Phpnewbie23 Posted February 6, 2009 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-755907 Share on other sites More sharing options...
Phpnewbie23 Posted February 6, 2009 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-755965 Share on other sites More sharing options...
RichardRotterdam Posted February 6, 2009 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-756015 Share on other sites More sharing options...
ScotDiddle Posted February 6, 2009 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-756175 Share on other sites More sharing options...
ScotDiddle Posted February 6, 2009 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-756192 Share on other sites More sharing options...
ScotDiddle Posted February 6, 2009 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-756222 Share on other sites More sharing options...
Phpnewbie23 Posted February 9, 2009 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-758129 Share on other sites More sharing options...
unkwntech Posted February 9, 2009 Share Posted February 9, 2009 <img ... border="0"> will get rid of that border for ya. Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-758131 Share on other sites More sharing options...
Phpnewbie23 Posted February 9, 2009 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-758153 Share on other sites More sharing options...
unkwntech Posted February 9, 2009 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-758168 Share on other sites More sharing options...
Phpnewbie23 Posted February 10, 2009 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/144060-creating-tooltips/#findComment-758770 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.