Fix positioning of tooltip

This commit is contained in:
Scott Lahteine 2015-02-07 09:03:00 -08:00
parent c99f1de9f3
commit 5d159851e5
3 changed files with 10 additions and 9 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; position: relative; } #main { max-width: 1000px; margin: 0 auto; }
#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; }
@ -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; } 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="text"], select { margin: 0.75em 0 0; }
input[type="checkbox"], input[type="radio"], input[type="file"] { margin: 1em 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 { font-family: "Andale mono", monospace; clear: both; }*/
#config_text, #config_adv_text { height: 25em; overflow: auto; background-color: #FFF; color: #888; padding: 10px; } #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; } input[type="checkbox"], input[type="radio"].enabler { margin-left: 1em; }

View File

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

View File

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