Fix tooltips blocking clicks
This commit is contained in:
parent
1a548c1bc1
commit
c99f1de9f3
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
</div>
|
||||
|
||||
<div id="tabs"></div>
|
||||
<div id="tooltip"></div>
|
||||
|
||||
<form id="config_form">
|
||||
|
||||
|
|
|
@ -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";
|
||||
|
|
Loading…
Reference in a new issue