Fix positioning of tooltip
This commit is contained in:
parent
c99f1de9f3
commit
5d159851e5
3 changed files with 10 additions and 9 deletions
|
@ -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; }
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
Reference in a new issue