Fix tooltips blocking clicks

This commit is contained in:
Scott Lahteine 2015-02-07 07:39:10 -08:00
parent 1a548c1bc1
commit c99f1de9f3
3 changed files with 42 additions and 35 deletions

View File

@ -3,7 +3,7 @@
body { margin: 0; padding: 0; background: #56A; color: #FFC; font-family: sans-serif; } 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 { padding: 0 4%; width: 92%; }
#main { font-family: monospace; } #main { font-family: monospace; }
h1, #message { text-align: center; } h1, #message { text-align: center; }
@ -73,24 +73,18 @@ fieldset legend { display: none; }
#serial_stepper { padding-top: 0.75em; display: block; float: left; } #serial_stepper { padding-top: 0.75em; display: block; float: left; }
#SERIAL_PORT { display: none; } #SERIAL_PORT { display: none; }
.tooltip { position: relative; } #tooltip {
.tooltip::before { display: none;
content: attr(data-tooltip); max-width: 30em;
font-family: sans-serif; padding: 8px;
font-size: 85%; border: 2px solid #73d699;
text-align: left; border-radius: 1em;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
/*white-space:pre-wrap;*/ font-family: sans-serif;
bottom: 9999px; font-size: 85%;
left: 110px;
color: #000; color: #000;
padding: 8px;
line-height: 1.1; line-height: 1.1;
max-width: 30em;
opacity: 0;
border-radius: 1em;
border: 2px solid #73d699;
background: #e2ff99; /* Old browsers */ background: #e2ff99; /* Old browsers */
background: -moz-linear-gradient(top, #e2ff99 0%, #73d699 100%); /* FF3.6+ */ 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+ */ 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); -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); box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
} }
.tooltip:hover::before { #tooltip>span {
opacity: 1; position: absolute;
bottom: 30px;
}
.tooltip:hover::after {
content: ""; content: "";
opacity: 1;
width: 0; width: 0;
height: 0; height: 0;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid #73d699; border-top: 8px solid #73d699;
z-index: 999; z-index: 999;
position: absolute; bottom: -10px;
/*white-space: nowrap;*/ left: 20px;
top: 2px;
left: 130px;
} }

View File

@ -20,6 +20,7 @@
</div> </div>
<div id="tabs"></div> <div id="tabs"></div>
<div id="tooltip"></div>
<form id="config_form"> <form id="config_form">

View File

@ -60,7 +60,8 @@ var configuratorApp = (function(){
boards_list = {}, boards_list = {},
therms_list = {}, therms_list = {},
total_config_lines, total_config_lines,
total_config_adv_lines; total_config_adv_lines,
hover_timer;
// Return this anonymous object as configuratorApp // Return this anonymous object as configuratorApp
return { return {
@ -111,14 +112,12 @@ var configuratorApp = (function(){
var loaded_items = {}; var loaded_items = {};
var config_files = [boards_file, config_file, config_adv_file]; var config_files = [boards_file, config_file, config_adv_file];
$.each(config_files, function(i,fname){ $.each(config_files, function(i,fname){
self.log("Loading " + fname + "...", 3);
$.ajax({ $.ajax({
url: marlin_config+'/'+fname, url: marlin_config+'/'+fname,
type: 'GET', type: 'GET',
async: true, async: true,
cache: false, cache: false,
success: function(txt) { success: function(txt) {
self.log("Loaded " + fname + "...", 3);
loaded_items[fname] = function(){ self.fileLoaded(fname, txt); }; loaded_items[fname] = function(){ self.fileLoaded(fname, txt); };
success_count++; success_count++;
}, },
@ -358,12 +357,31 @@ var configuratorApp = (function(){
if (elm.defineInfo == null) { if (elm.defineInfo == null) {
var inf = elm.defineInfo = this.getDefineInfo(name, adv); var inf = elm.defineInfo = this.getDefineInfo(name, adv);
$elm.on($elm.attr('type') == 'text' ? 'input' : 'change', this.handleChange); $elm.on($elm.attr('type') == 'text' ? 'input' : 'change', this.handleChange);
var comm = inf.comment;
var $tipme = $elm.prev('label'); if (inf.comment) {
if ($tipme.length) { var $tipme = $elm.prev('label');
comm ? if (inf.comment && $tipme.length) {
$tipme.addClass('tooltip').attr('data-tooltip',comm) : var $tt = $('#tooltip');
$tipme.removeClass('tooltip').removeAttr('data-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); this.setFieldFromDefine(name);
@ -622,7 +640,7 @@ var configuratorApp = (function(){
var r, s; var r, s;
findDef = new RegExp('([ \\t]*(//|#)[^\n]+\n){1,4}\\s{0,1}' + info.line, 'g'); findDef = new RegExp('([ \\t]*(//|#)[^\n]+\n){1,4}\\s{0,1}' + info.line, 'g');
if (r = findDef.exec(txt)) { 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) { while((s = findDef.exec(r[0])) !== null) {
if (s[1].match(/\/\/[ \\t]*#define/) == null) if (s[1].match(/\/\/[ \\t]*#define/) == null)
comment += s[1] + "\n"; comment += s[1] + "\n";