Fix positioning of tooltip

Marlin/configurator/css/configurator.css

@@ -3,7 +3,7 @@
 
 body { margin: 0; padding: 0; background: #56A; color: #FFC; font-family: sans-serif; }
 
-#main { max-width: 1000px; margin: 0 auto; position: relative; }
+#main { max-width: 1000px; margin: 0 auto; }
 #main { padding: 0 4%; width: 92%; }
 #main { font-family: monospace; }
 h1, #message { text-align: center; }
@@ -22,7 +22,7 @@ label.newline, textarea, fieldset { clear: both; }
 label { width: 130px; height: 1em; padding: 10px 480px 10px 1em; margin-right: -470px; text-align: right; }
 input[type="text"], select { margin: 0.75em 0 0; }
 input[type="checkbox"], input[type="radio"], input[type="file"] { margin: 1em 0 0; }
-#config_form { display: block; background: #DDD; padding: 20px; color: #000; }
+#config_form { display: block; background: #DDD; padding: 20px; color: #000; position: relative; }
 /*#config_text, #config_adv_text { font-family: "Andale mono", monospace; clear: both; }*/
 #config_text, #config_adv_text { height: 25em; overflow: auto; background-color: #FFF; color: #888; padding: 10px; }
 input[type="checkbox"], input[type="radio"].enabler { margin-left: 1em; }

Marlin/configurator/index.html

@@ -20,10 +20,11 @@
       </div>
 
       <div id="tabs"></div>
-      <div id="tooltip"></div>
 
       <form id="config_form">
 
+        <div id="tooltip"></div>
+
         <label>Drop Files Here:</label><input type="file" id="file-upload" />
 
         <fieldset id="machine">

Marlin/configurator/js/configurator.js

@@ -55,6 +55,7 @@ var configuratorApp = (function(){
       boards_file = 'boards.h',
       config_file = 'Configuration.h',
       config_adv_file = 'Configuration_adv.h',
+      $tooltip = $('#tooltip'),
       $config = $('#config_text'),
       $config_adv = $('#config_adv_text'),
       boards_list = {},
@@ -360,14 +361,13 @@ var configuratorApp = (function(){
 
         if (inf.comment) {
           var $tipme = $elm.prev('label');
-          if (inf.comment && $tipme.length) {
+          if ($tipme.length) {
-            var $tt = $('#tooltip');
             $tipme.hover(
               function() {
-                var offs = $tipme.offset();
+                var pos = $tipme.position();
-                $tt.text(inf.comment)
+                $tooltip.text(inf.comment)
                   .append('<span>')
-                  .css({bottom:($tt.parent().height()-offs.top+20)+'px',left:(offs.left+70)+'px'})
+                  .css({bottom:($tooltip.parent().outerHeight()-pos.top)+'px',left:(pos.left+70)+'px'})
                   .show();
                 if (hover_timer) {
                   clearTimeout(hover_timer);
@@ -377,7 +377,7 @@ var configuratorApp = (function(){
               function() {
                 hover_timer = setTimeout(function(){
                   hover_timer = null;
-                  $tt.fadeOut(400);
+                  $tooltip.fadeOut(400);
                 }, 400);
               }
             );