From c99f1de9f35551ee3886704bdb3f984b40881ff1 Mon Sep 17 00:00:00 2001
From: Scott Lahteine <sourcetree@thinkyhead.com>
Date: Sat, 7 Feb 2015 07:39:10 -0800
Subject: [PATCH] Fix tooltips blocking clicks

---
 Marlin/configurator/css/configurator.css | 38 ++++++++----------------
 Marlin/configurator/index.html           |  1 +
 Marlin/configurator/js/configurator.js   | 38 +++++++++++++++++-------
 3 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/Marlin/configurator/css/configurator.css b/Marlin/configurator/css/configurator.css
index 1062e53aa1..6d0c63029f 100644
--- a/Marlin/configurator/css/configurator.css
+++ b/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; }
+#main { max-width: 1000px; margin: 0 auto; position: relative; }
 #main { padding: 0 4%; width: 92%; }
 #main { font-family: monospace; }
 h1, #message { text-align: center; }
@@ -73,24 +73,18 @@ fieldset legend { display: none; }
 #serial_stepper { padding-top: 0.75em; display: block; float: left; }
 #SERIAL_PORT { display: none; }
 
-.tooltip { position: relative; }
-.tooltip::before {
-	content: attr(data-tooltip);
-	font-family: sans-serif;
-	font-size: 85%;
-	text-align: left;
+#tooltip {
+	display: none;
+	max-width: 30em;
+	padding: 8px;
+	border: 2px solid #73d699;
+	border-radius: 1em;
 	position: absolute;
 	z-index: 999;
-	/*white-space:pre-wrap;*/
-	bottom: 9999px;
-	left: 110px;
+	font-family: sans-serif;
+	font-size: 85%;
 	color: #000;
-	padding: 8px;
 	line-height: 1.1;
-	max-width: 30em;
-	opacity: 0;
-	border-radius: 1em;
-	border: 2px solid #73d699;
 	background: #e2ff99; /* Old browsers */
 	background: -moz-linear-gradient(top,  #e2ff99 0%, #73d699 100%); /* FF3.6+ */
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2ff99), color-stop(100%,#73d699)); /* Chrome,Safari4+ */
@@ -103,21 +97,15 @@ fieldset legend { display: none; }
 	-moz-box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
 	box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
 	}
-.tooltip:hover::before {
-	opacity: 1;
-	bottom: 30px;
-	}
-.tooltip:hover::after {
+#tooltip>span {
+	position: absolute;
 	content: "";
-	opacity: 1;
 	width: 0;
 	height: 0;
 	border-left: 8px solid transparent;
 	border-right: 8px solid transparent;
 	border-top: 8px solid #73d699;
 	z-index: 999;
-	position: absolute;
-	/*white-space: nowrap;*/
-	top: 2px;
-	left: 130px;
+	bottom: -10px;
+	left: 20px;
 	}
diff --git a/Marlin/configurator/index.html b/Marlin/configurator/index.html
index f6c318ccf3..ccdd5e9799 100644
--- a/Marlin/configurator/index.html
+++ b/Marlin/configurator/index.html
@@ -20,6 +20,7 @@
       </div>
 
       <div id="tabs"></div>
+      <div id="tooltip"></div>
 
       <form id="config_form">
 
diff --git a/Marlin/configurator/js/configurator.js b/Marlin/configurator/js/configurator.js
index 64dca1f8f2..8bbf9d7e35 100644
--- a/Marlin/configurator/js/configurator.js
+++ b/Marlin/configurator/js/configurator.js
@@ -60,7 +60,8 @@ var configuratorApp = (function(){
       boards_list = {},
       therms_list = {},
       total_config_lines,
-      total_config_adv_lines;
+      total_config_adv_lines,
+      hover_timer;
 
   // Return this anonymous object as configuratorApp
   return {
@@ -111,14 +112,12 @@ var configuratorApp = (function(){
       var loaded_items = {};
       var config_files = [boards_file, config_file, config_adv_file];
       $.each(config_files, function(i,fname){
-        self.log("Loading " + fname + "...", 3);
         $.ajax({
           url: marlin_config+'/'+fname,
           type: 'GET',
           async: true,
           cache: false,
           success: function(txt) {
-            self.log("Loaded " + fname + "...", 3);
             loaded_items[fname] = function(){ self.fileLoaded(fname, txt); };
             success_count++;
           },
@@ -358,12 +357,31 @@ var configuratorApp = (function(){
       if (elm.defineInfo == null) {
         var inf = elm.defineInfo = this.getDefineInfo(name, adv);
         $elm.on($elm.attr('type') == 'text' ? 'input' : 'change', this.handleChange);
-        var comm = inf.comment;
-        var $tipme = $elm.prev('label');
-        if ($tipme.length) {
-          comm ?
-            $tipme.addClass('tooltip').attr('data-tooltip',comm) :
-            $tipme.removeClass('tooltip').removeAttr('data-tooltip');
+
+        if (inf.comment) {
+          var $tipme = $elm.prev('label');
+          if (inf.comment && $tipme.length) {
+            var $tt = $('#tooltip');
+            $tipme.hover(
+              function() {
+                var offs = $tipme.offset();
+                $tt.text(inf.comment)
+                  .append('<span>')
+                  .css({bottom:($tt.parent().height()-offs.top+20)+'px',left:(offs.left+70)+'px'})
+                  .show();
+                if (hover_timer) {
+                  clearTimeout(hover_timer);
+                  hover_timer = null;
+                }
+              },
+              function() {
+                hover_timer = setTimeout(function(){
+                  hover_timer = null;
+                  $tt.fadeOut(400);
+                }, 400);
+              }
+            );
+          }
         }
       }
       this.setFieldFromDefine(name);
@@ -622,7 +640,7 @@ var configuratorApp = (function(){
           var r, s;
           findDef = new RegExp('([ \\t]*(//|#)[^\n]+\n){1,4}\\s{0,1}' + info.line, 'g');
           if (r = findDef.exec(txt)) {
-            findDef = new RegExp('^[ \\t]*//+[ \\t]*(.*)[ \\t]*$', 'gm');
+            findDef = new RegExp('^[ \\t]*//+[ \\t]*([^#].*)[ \\t]*$', 'gm');
             while((s = findDef.exec(r[0])) !== null) {
               if (s[1].match(/\/\/[ \\t]*#define/) == null)
                 comment += s[1] + "\n";