Skip to content

Commit

Permalink
change tooltip layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@MatSchaeff
MatSchaeff committed Oct 7, 2016
1 parent b999a90 commit d0e04a8
Show file tree
Hide file tree
Showing 6 changed files with 11,704 additions and 40 deletions.
45 changes: 40 additions & 5 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,40 +46,75 @@ a:focus {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
/* background: rgba(0, 0, 0, 0.8);*/
background: #eee;
/* color: #fff;*/
color: black;
border-radius: 2px;
}

/*Creates a small triangle extender for the tooltip */
/*Creates a small triangle extender for the tooltip - left*/
.tooltip2:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
/* color: rgba(0, 0, 0, 0.8);*/
color: #eee;
content: "\25BC";
position: absolute;
text-align: left;
margin: -1px 0 0 0;
top: 98%;
left: 10px;
}
/*Creates a small triangle extender for the tooltip - left */
.tooltip2:before {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.6);
/* color: #333;*/
content: "\25BC";
position: absolute;
text-align: left;
margin: -1px 0 0 0;
top: 99%;
left: 10px;
}
.tooltip3:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
/* color: rgba(0, 0, 0, 0.8);*/
color: #eee;
content: "\25BC";
position: absolute;
text-align: right;
margin: -1px 0 0 0;
top: 98%;
right: 10px;
}
.tooltip3:before {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.6);
/* color: #eee;*/
content: "\25BC";
position: absolute;
text-align: right;
margin: -1px 0 0 0;
top: 99%;
right: 10px;
}

.yaxis{
background-color:green;
Expand Down
11,614 changes: 11,604 additions & 10 deletions dist/feature-viewer.bundle.js
View file

Large diffs are not rendered by default.

45 changes: 40 additions & 5 deletions dist/feature-viewer.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions dist/feature-viewer.min.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions dist/feature-viewer.nextprot.js
View file

Large diffs are not rendered by default.

30 changes: 15 additions & 15 deletions src/feature-viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ var FeatureViewer = (function () {
}
tooltipDiv.style({
top: (absoluteMousePos[1] - 55) + 'px',
'background-color': 'rgba(0, 0, 0, 0.8)',
'background-color': '#eee',
width: 'auto',
'max-width': '170px',
height: 'auto',
Expand All @@ -145,25 +145,25 @@ var FeatureViewer = (function () {
'box-shadow': '0 1px 2px 0 #656565'
});
if (object.type === "path") {
var first_line = '<p style="margin:2px;color:white">start : <span style="color:' + tooltipColor +'">' + pD[0].x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">end : <span style="color:' + tooltipColor +'">' + pD[1].x + '</span></p>';
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">start : <span>' + pD[0].x + '</span></p>';
var second_line = '<p style="margin:2px;color:' + tooltipColor +'">end : <span>' + pD[1].x + '</span></p>';
} else if (object.type === "line") {
var elemHover = updateLineTooltip(absoluteMousePos[0],pD);
if (elemHover.description) {
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + elemHover.x + ' : <span style="color:#ccc"> ' + elemHover.y + '</span></p>';
var second_line = '<p style="margin:2px;color:white;font-size:9px">' + elemHover.description + '</p>';
var first_line = '<p style="margin:2px;font-weight:700;color:' + tooltipColor +'">' + elemHover.x + ' : <span> ' + elemHover.y + '</span></p>';
var second_line = '<p style="margin:2px;color:' + tooltipColor +';font-size:9px">' + elemHover.description + '</p>';
}
else {
var first_line = '<p style="margin:2px;color:white">position : <span style="color:' + tooltipColor +'" id="tLineX">' + elemHover.x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">count : <span style="color:' + tooltipColor +'" id="tLineC">' + elemHover.y + '</span></p>';
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">position : <span id="tLineX">' + elemHover.x + '</span></p>';
var second_line = '<p style="margin:2px;color:' + tooltipColor +'">count : <span id="tLineC">' + elemHover.y + '</span></p>';
}
} else if (object.type === "unique" || pD.x === pD.y) {
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + pD.x + '</p>';
if (pD.description) var second_line = '<p style="margin:2px;color:white;font-size:9px">' + pD.description + '</p>';
var first_line = '<p style="margin:2px;font-weight:700;color:' + tooltipColor +'">' + pD.x + '</p>';
if (pD.description) var second_line = '<p style="margin:2px;color:' + tooltipColor +';font-size:9px">' + pD.description + '</p>';
else var second_line = '';
} else {
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + pD.x + ' - ' + pD.y + '</p>';
if (pD.description) var second_line = '<p style="margin:2px;color:white;font-size:9px">' + pD.description + '</p>';
var first_line = '<p style="margin:2px;font-weight:700;color:' + tooltipColor +'">' + pD.x + ' - ' + pD.y + '</p>';
if (pD.description) var second_line = '<p style="margin:2px;color:' + tooltipColor +';font-size:9px">' + pD.description + '</p>';
else var second_line = '';
}

Expand All @@ -180,12 +180,12 @@ var FeatureViewer = (function () {
var absoluteMousePos = d3.mouse(bodyNode);
var elemHover = updateLineTooltip(absoluteMousePos[0],pD);
if (elemHover.description) {
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + elemHover.x + ' : <span style="color:#ccc"> ' + elemHover.y + '</span></p>';
var second_line = '<p style="margin:2px;color:white;font-size:9px">' + elemHover.description + '</p>';
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">' + elemHover.x + ' : <span> ' + elemHover.y + '</span></p>';
var second_line = '<p style="margin:2px;color:' + tooltipColor +';font-size:9px">' + elemHover.description + '</p>';
}
else {
var first_line = '<p style="margin:2px;color:white">position : <span style="color:' + tooltipColor +'" id="tLineX">' + elemHover.x + '</span></p>';
var second_line = '<p style="margin:2px;color:white">count : <span style="color:' + tooltipColor +'" id="tLineC">' + elemHover.y + '</span></p>';
var first_line = '<p style="margin:2px;color:' + tooltipColor +'">position : <span id="tLineX">' + elemHover.x + '</span></p>';
var second_line = '<p style="margin:2px;color:' + tooltipColor +'">count : <span id="tLineC">' + elemHover.y + '</span></p>';
}
tooltipDiv.html(first_line + second_line);
// $('#tLineX').text(elemHover.x);
Expand Down

0 comments on commit d0e04a8

Please sign in to comment.