From c99f1de9f35551ee3886704bdb3f984b40881ff1 Mon Sep 17 00:00:00 2001 From: Scott Lahteine 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 1062e53aa..6d0c63029 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 f6c318ccf..ccdd5e979 100644 --- a/Marlin/configurator/index.html +++ b/Marlin/configurator/index.html @@ -20,6 +20,7 @@
+
diff --git a/Marlin/configurator/js/configurator.js b/Marlin/configurator/js/configurator.js index 64dca1f8f..8bbf9d7e3 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('') + .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";