refactored tooltip handling (please test!)

js/tooltip.js

@@ -12,23 +12,46 @@
 var ttXpos = 0, ttYpos = 0;
 var ttXadd = 10, ttYadd = -10;
 var ttDisplay = 0, ttHoldIt = 0;
+
 // Check if browser does support dynamic content and dhtml
-var ttNS4 = (document.layers) ? 1 : 0;           // the old Netscape 4
+if (document.getElementById) {
-var ttIE4 = (document.all) ? 1 : 0;              // browser wich uses document.all
+    // DOM-compatible browsers
-var ttDOM = (document.getElementById) ? 1 : 0;   // DOM-compatible browsers
+    var ttDOM = 1;
-if (ttDOM) { // if DOM-compatible, set the others to false
+} else {
-    ttNS4 = 0;
+    // the old Netscape 4
-    ttIE4 = 0;
+    var ttNS4 = (document.layers) ? 1 : 0;
+    // browser wich uses document.all
+    var ttIE4 = (document.all) ? 1 : 0;
 }
 
 var myTooltipContainer = null;
 
-if ( (ttDOM) || (ttIE4) || (ttNS4) ) {
+/**
-    // mouse-event
+ * initialize tooltip
-    if ( ttNS4 ) {
+ */
-        document.captureEvents(Event.MOUSEMOVE);
+function PMA_TT_init()
-    } else {
+{
-        document.onmousemove = mouseMove;
+    // get all 'light bubbles' on page
+    var tooltip_icons = window.parent.getElementsByClassName('footnotemarker', document, 'sup');
+    var tooltip_count = tooltip_icons.length;
+
+    if (tooltip_count < 1) {
+        // no 'bubbles' found
+        return;
+    }
+
+    // insert tooltip container
+    myTooltipContainer = document.createElement("div");
+    myTooltipContainer.id = 'TooltipContainer';
+    window.parent.addEvent(myTooltipContainer, 'mouseover', holdTooltip);
+    window.parent.addEvent(myTooltipContainer, 'mouseout', swapTooltip);
+    document.body.appendChild(myTooltipContainer);
+
+    // capture mouse-events
+    for (i = 0; i < tooltip_count; i++) {
+        window.parent.addEvent(tooltip_icons[i], 'mousemove', mouseMove);
+        window.parent.addEvent(tooltip_icons[i], 'mouseover', pmaTooltip);
+        window.parent.addEvent(tooltip_icons[i], 'mouseout', swapTooltip);
     }
 }
 
@@ -37,7 +60,8 @@ if ( (ttDOM) || (ttIE4) || (ttNS4) ) {
  *
  * @param string theText tooltip content
  */
-function textTooltip(theText) {
+function PMA_TT_setText(theText)
+{
     if (ttDOM || ttIE4) {                   // document.getEelementById || document.all
         myTooltipContainer.innerHTML = "";  // we should empty it first
         myTooltipContainer.innerHTML = theText;
@@ -58,17 +82,14 @@ var ttTimerID = 0;
  *
  * @param boolean stat view status
  */
-function swapTooltip(stat) {
+function swapTooltip(stat)
-    if (ttHoldIt!=1) {
+{
-        if (stat!='default') {
+    if (ttHoldIt != 1) {
-            if (stat=='true')
+        if (stat == 'true') {
             showTooltip(true);
-            else if (stat=='false')
+        } else if (ttDisplay) {
-                showTooltip(false);
+            ttTimerID = setTimeout("showTooltip(false);", 500);
         } else {
-            if (ttDisplay)
-                ttTimerID = setTimeout("showTooltip(false);",500);
-            else
             showTooltip(true);
         }
     } else {
@@ -85,8 +106,9 @@ function swapTooltip(stat) {
  *
  * @param boolean stat view status
  */
-function showTooltip(stat) {
+function showTooltip(stat)
-    if (stat==false) {
+{
+    if (stat == false) {
         if (ttNS4)
             myTooltipContainer.visibility = "hide";
         else
@@ -100,10 +122,12 @@ function showTooltip(stat) {
         ttDisplay = 1;
     }
 }
+
 /**
  * hold it, if we create or move the mouse over the tooltip
  */
-function holdTooltip() {
+function holdTooltip()
+{
     ttHoldIt = 1;
     swapTooltip('true');
     ttHoldIt = 0;
@@ -115,7 +139,8 @@ function holdTooltip() {
  * @param integer posX    horiz. position
  * @param integer posY    vert. position
  */
-function moveTooltip(posX, posY) {
+function moveTooltip(posX, posY)
+{
     if (ttDOM || ttIE4) {
         myTooltipContainer.style.left = posX + "px";
         myTooltipContainer.style.top  = posY + "px";
@@ -127,31 +152,20 @@ function moveTooltip(posX, posY) {
 
 /**
  * build the tooltip
+ * usally called from eventhandler
  *
  * @param    string    theText    tooltip content
  */
-function pmaTooltip( theText ) {
+function pmaTooltip(e)
-    // reference to TooltipContainer
+{
-    if ( null == myTooltipContainer ) {
+    var theText = document.getElementById(this.getAttribute('name')).innerHTML;
-        if (ttNS4) {
-            myTooltipContainer = document.TooltipContainer;
-        } else if (ttIE4) {
-            myTooltipContainer = document.all('TooltipContainer');
-        } else if (ttDOM) {
-            myTooltipContainer = document.getElementById('TooltipContainer');
-        } else {
-            return;
-        }
 
-        if ( typeof( myTooltipContainer ) == 'undefined' ) {
+    var plusX = 0, plusY = 0, docX = 0, docY = 0;
-            return;
-        }
-    }
-
-    var plusX=0, plusY=0, docX=0, docY=0;
     var divHeight = myTooltipContainer.clientHeight;
     var divWidth  = myTooltipContainer.clientWidth;
-    if (navigator.appName.indexOf("Explorer")!=-1) {
+
+    if (navigator.appName.indexOf("Explorer") != -1) {
+        // IE ...
         if (document.documentElement && document.documentElement.scrollTop) {
             plusX = document.documentElement.scrollLeft;
             plusY = document.documentElement.scrollTop;
@@ -176,7 +190,7 @@ function pmaTooltip( theText ) {
     if ((ttYpos + divHeight) > docY)
         ttYpos = ttYpos - (divHeight + (ttYadd * 2));
 
-    textTooltip(theText);
+    PMA_TT_setText(theText);
     moveTooltip((ttXpos + ttXadd), (ttYpos + ttYadd));
     holdTooltip();
 }
@@ -194,4 +208,5 @@ function mouseMove(e) {
         ttXpos = e.pageX;
         ttYpos = e.pageY;
     }
+    moveTooltip((ttXpos + ttXadd), (ttYpos + ttYadd));
 }

libraries/auth/config.auth.lib.php

@@ -94,19 +94,9 @@ function PMA_auth_fails()
 <table border="0" cellpadding="0" cellspacing="3" align="center" width="80%">
     <tr>
         <td>
-    <?php
-    echo "\n";
-    $GLOBALS['is_header_sent'] = TRUE;
 
-    /**
-     * @todo I have included this div from libraries/header.inc.php to work around
-     * an undefined variable in tooltip.js, when the server is not responding.
-     * Work has to be done to merge all code that starts the page (DOCTYPE and
-     * this div) to one place
-     */
-    ?>
-    <div id="TooltipContainer" onmouseover="holdTooltip();" onmouseout="swapTooltip('default');"></div>
     <?php
+    $GLOBALS['is_header_sent'] = TRUE;
 
     if (isset($GLOBALS['allowDeny_forbidden']) && $GLOBALS['allowDeny_forbidden']) {
         echo '<p>' . $GLOBALS['strAccessDenied'] . '</p>' . "\n";

libraries/common.inc.php

@@ -459,6 +459,11 @@ $GLOBALS['js_messages'] = array();
  */
 $GLOBALS['js_events'] = array();
 
+/**
+ * footnotes to be displayed ot the page bottom
+ * @global array $footnotes
+ */
+$GLOBALS['footnotes'] = array();
 
 /******************************************************************************/
 /* parsing configuration file                         LABEL_parsing_config_file      */

libraries/common.lib.php

@@ -425,20 +425,29 @@ function PMA_showMySQLDocu($chapter, $link, $big_icon = false)
 } // end of the 'PMA_showMySQLDocu()' function
 
 /**
- * Displays a hint icon, on mouse over show the hint
+ * returns HTML for a footnote marker and add the messsage to the footnotes
  *
- * @uses    $GLOBALS['pmaThemeImage']
+ * @uses    $GLOBALS['footnotes']
- * @uses    PMA_jsFormat()
  * @param   string   the error message
- *
+ * @return  string html code for a footnote marker
  * @access  public
  */
-function PMA_showHint($hint_message)
+function PMA_showHint($hint_message, $type = 'notice')
 {
-    //return '<img class="lightbulb" src="' . $GLOBALS['pmaThemeImage'] . 'b_tipp.png" width="16" height="16" border="0" alt="' . $hint_message . '" title="' . $hint_message . '" align="middle" onclick="alert(\'' . PMA_jsFormat($hint_message, false) . '\');" />';
+    $key = md5($hint_message);
-    return '<img class="lightbulb" src="' . $GLOBALS['pmaThemeImage']
+
-        . 'b_tipp.png" width="16" height="16" alt="Tip" title="Tip" onmouseover="pmaTooltip(\''
+    if (! isset($GLOBALS['footnotes'][$key])) {
-        .  PMA_jsFormat($hint_message, false) . '\'); return false;" onmouseout="swapTooltip(\'default\'); return false;" />';
+        $nr = count($GLOBALS['footnotes']) + 1;
+        $GLOBALS['footnotes'][$key] = array(
+            'note' => $hint_message,
+            'type' => $type,
+            'nr'   => $nr,
+        );
+    } else {
+        $nr = $GLOBALS['footnotes'][$key]['nr'];
+    }
+
+    return '<sup class="footnotemarker" name="footnote_' . $nr . '">' . $nr . '</sup>';
 }
 
 /**

libraries/footer.inc.php

@@ -58,6 +58,15 @@ if (! PMA_isValid($_REQUEST['no_history']) && empty($GLOBALS['error_message'])
         $GLOBALS['sql_query']);
 }
 
+if (count($GLOBALS['footnotes'])) {
+    echo '<div class="notice">';
+    foreach ($GLOBALS['footnotes'] as $footnote) {
+        echo '<span id="footnote_' . $footnote['nr'] . '"><sup>'
+            . $footnote['nr'] . '</sup> ' . $footnote['note'] . '</span><br />';
+    }
+    echo '</div>';
+}
+
 ?>
 <script type="text/javascript">
 //<![CDATA[

libraries/header.inc.php

@@ -41,7 +41,6 @@ if (empty($GLOBALS['is_header_sent'])) {
 </head>
 
 <body>
-<div id="TooltipContainer" onmouseover="holdTooltip();" onmouseout="swapTooltip('default');"></div>
     <?php
 
     // Include possible custom headers