get or create div.tooltip, place it inside tree-and-controls WIP #167

edamontology · May 5, 2021 · fb4e286 · fb4e286
1 parent 6199214
commit fb4e286
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -194,6 +194,7 @@ <h1 id="pageTitle">EDAM ontology</h1>
                         <span class="on-controls-hover"><b for="meta_data_file">Data File<br/></b><span id="meta_data_file"></span></span>
                     </div>
                 </div>
+                <div class="tooltip"></div>
             </div>
         </div>
         <div class="col-xs-12 col-lg-4" id="edamAccordion">

diff --git a/js/tree-reusable-d3.js b/js/tree-reusable-d3.js
@@ -87,7 +87,10 @@ function interactive_tree() {
                 .call(zoom);
             var vis = svg.append("svg:g");
 
-            var tooltip = d3.select("body").append("div")
+            var tooltip = (d3.select("body").select("div.tooltip").empty()
+                            ?d3.select("body").append("div")
+                            :d3.select("body").select("div.tooltip")
+                           )
                 .attr("class", "tooltip")
                 .style("opacity", 0)
                 .on("mouseover", function(d) {
@@ -101,7 +104,7 @@ function interactive_tree() {
                     .style("opacity", 0);
                     tooltip.transition()
                     .delay(200)
-                    .style("top",  "-200px");
+                    .style("top",  "-2000px");
                 });
 
             reset = function(){
@@ -184,8 +187,8 @@ function interactive_tree() {
                             .duration(200)
                             .style("opacity", 1);
                         tooltip
-                            .style("left", (d3.event.pageX+20) + "px")
-                            .style("top", (d3.event.pageY - 28) + "px");
+                            .style("left", (d3.event.layerX+20) + "px")
+                            .style("top", (d3.event.layerY-5) + "px");
                     })
                     .on("mouseout", function(d) {
                             tooltip
@@ -195,7 +198,7 @@ function interactive_tree() {
                             tooltip
                                 .transition()
                                 .delay(200)
-                                .style("top",  "-200px");
+                                .style("top",  "-2000px");
                     });
 
                 // UPDATE
-Original file line number
+Diff line change
@@ Expand Up / @@ -194,6 +194,7 @@ <h1 id="pageTitle">EDAM ontology</h1> @@
                             <span class="on-controls-hover"><b for="meta_data_file">Data File<br/></b><span id="meta_data_file"></span></span>
                         </div>
                     </div>
+                    <div class="tooltip"></div>
                 </div>
             </div>
             <div class="col-xs-12 col-lg-4" id="edamAccordion">
@@ Expand Down @@