fixed tooltip positioning

appended an svg to body.

Author: benjaminbeer256

index.html

@@ -111,7 +111,7 @@ <h4>Composite metadata</h4>
                 </div>
                 <div class="col-8">
                     <div class="row" style="display:flex; align-items:center;">
-                        <div style="max-width:calc(100% - 270px);">
+                        <div style="max-width:calc(100% - 270px);" id="main-plot-div">
                             <svg id="main-plot" baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica" style="height: 50vh; max-width: 100%; overflow: hide;"></svg>
                             <script src="js/sliding_window.js"></script>
                             <script src="js/widgets/main_plot.js"></script>

js/events/plot_tabs.js

@@ -11,6 +11,8 @@ $(function() {
     })
     d3.select("#nucleosome-slider-tab").on("click", function() {
         showPane("nucleosome-slider-options", this);
+        $("#main-plot").main_plot("toggle_tooltip", false);
+        $("#nucleosome-slider").nucleosome_slider("update_all");
     })
 
     function showPane(id, tab){

js/widgets/main_plot.js

@@ -155,7 +155,7 @@ $(function() {
                 .attr("transform", "translate(" + (this.width - this.margins.right + 25) + " " + this.margins.top + ")");
 
             // Create tooltip
-            this._elements.tooltip = main_plot.append("g")
+            this._elements.tooltip = d3.select("body").append("svg")
                 .attr("id", "composite-plot-tooltip");
 
             main_plot.append("g")
@@ -171,7 +171,7 @@ $(function() {
                 $("#main-plot").main_plot("move_tooltip", e)
             });
             main_plot.on("mouseleave", function() {
-                $("#main-plot").main_plot("hide_tooltip")
+                // $("#main-plot").main_plot("hide_tooltip")
             });
         },
 
@@ -763,6 +763,7 @@ $(function() {
         },
 
         move_tooltip: function(ev) {
+            let self = this;
             if (this.enable_tooltip) {
                 // Get data for all composites that are plotted and have files loaded
                 let data = $("#settings-table").settings_table("export").filter(d => d.files_loaded > 0 && !d.hide),
@@ -780,7 +781,11 @@ $(function() {
                     // Move tooltip to mouse position
                     this._elements.tooltip
                         .style("display", null)
-                        .attr("transform", "translate(" + this.xscale(mouse_x_scaled) + " " + mouse_y + ")");
+                        .style("position", "absolute")
+                        .style("top", ev.clientY)
+                        .style("left", ev.clientX)
+                        .style("pointer-events", "none");
+                        // .attr("transform", "translate(" + this.xscale(mouse_x_scaled) + " " + mouse_y + ")");
 
                     // Create tooltip border and text
                     let tooltip_border = this._elements.tooltip.selectAll("path")
@@ -807,9 +812,12 @@ $(function() {
                                 : parseFloat(d.sense[mouse_x_scaled - d.xmin].toPrecision(2)) + "; " + parseFloat(d.anti[mouse_x_scaled - d.xmin].toPrecision(2))));
                     // Get bounding box of text
                     let {y, width: w, height: h} = tooltip_text.node().getBBox();
-                    tooltip_text.attr("transform", "translate(" + (-w / 2) + " " + (15 - y) + ")");
+                    tooltip_text.attr("transform", "translate(" + 2 + " " + (15 - y) + ")");
                     // Update tooltip border
-                    tooltip_border.attr("d", "M" + (-w / 2 - 10) + ",5H-5l5,-5l5,5H" + (w / 2 + 10) + "v" + (h + 20) + "h-" + (w + 20) + "z")
+                    tooltip_border.attr("d", "M" + (w + 4) + " 5 H " + (w + 20) / 2 + " l -5 -5 l-5 5 H 0 V " + (h + 20) + " H " + (w + 4)  + " z")
+                    this._elements.tooltip
+                        .style("top", ev.clientY)
+                        .style("left",  ev.clientX - ((w + 8) / 2));
                 } else {
                     this._elements.tooltip.style("display", "none")
                 }

js/widgets/reference_axes.js

@@ -23,10 +23,10 @@ $(function() {
 
             this.main_plot = $("#main-plot").main_plot("instance");
 
-            d3.select("body").on("mousemove", function(e) {
+            d3.select("#main-plot-div").on("mousemove", function(e) {
                 self.drag_plot_element(e);
             });
-            d3.select("body").on("mouseup", function() {
+            d3.select("#main-plot-div").on("mouseup", function() {
                 self.end_dragging();
             });