Fix tooltip display

src/ts/charts/multi-line-chart.ts

@@ -39,7 +39,7 @@ export class MultiLineChart extends Chart {
     }
 
     protected getDefaultContainerSize() {
-        return { width: 800, height: 500 };
+        return { width: 800, height: 400 };
     }
 
     protected initVis() {
@@ -83,6 +83,7 @@ export class MultiLineChart extends Chart {
             .attr('id', 'multi-line-chart-tooltip')
             .style('opacity', 0)
             .style('position', 'absolute')
+            .style('display', 'none')
             .style('background', 'white')
             .style('border', '1px solid black')
             .style('padding', '5px')
@@ -169,7 +170,8 @@ export class MultiLineChart extends Chart {
                 vis.tooltip
                     .style("left", (event.pageX - 20) + "px")
                     .style("top", (event.pageY - 85) + "px")
-                    .style("opacity", 1);
+                    .style("opacity", 1)
+                    .style('display', 'block');
             });
 
         // Render legend //

src/ts/charts/pie-chart.ts

@@ -51,6 +51,7 @@ export class PieChart extends Chart {
             .attr('id', 'pie-chart-tooltip')
             .style('opacity', 0)
             .style('position', 'absolute')
+            .style('display', 'none')
             .style('background', 'white')
             .style('border', '1px solid black')
             .style('padding', '5px')
@@ -124,9 +125,7 @@ export class PieChart extends Chart {
                     return arcData.data.key === d.data.key;
                 }).attr("stroke-width", 6);
 
-                vis.tooltip
-                    .style('display', 'block')
-                    .style('opacity', .9);
+                vis.tooltip.style('opacity', .9).style('display', 'block');
                 vis.tooltip.html(`${d.data.key}<br>Total Medals: ${d.data.value}`)
                     .style('left', (event.pageX - 20) + 'px')
                     .style('top', (event.pageY - 85) + 'px');
@@ -138,7 +137,7 @@ export class PieChart extends Chart {
             .on("mouseout", function () {
                 // Reset opacity of all arcs
                 arcsEnter.selectAll("path").attr("opacity", 1).attr('stroke-width', 0); // Reset all arcs to full opacity
-                vis.tooltip.style('display', 'none');
+                vis.tooltip.style('opacity', '0');
             });
 
         // Update section

src/ts/charts/stacked-bar-chart.ts

@@ -29,7 +29,7 @@ export class StackedBarChart extends Chart {
     private colorScale: d3.ScaleOrdinal<string, unknown, never>;
     private stackGenerator: d3.Stack<any, { [key: string]: number; }, string>;
 
-    protected getDefaultMargins() { return { top: 5, right: 100, bottom: 100, left: 100 }; }
+    protected getDefaultMargins() { return { top: 5, right: 100, bottom: 120, left: 100 }; }
     protected getDefaultContainerSize() { return { width: 800, height: 400 }; }
 
     protected initVis() {
@@ -105,6 +105,7 @@ export class StackedBarChart extends Chart {
             .attr('id', 'stacked-bar-chart-tooltip')
             .style('opacity', 0)
             .style('position', 'absolute')
+            .style('display', 'none')
             .style('background', 'white')
             .style('border', '1px solid black')
             .style('padding', '5px')
@@ -166,7 +167,7 @@ export class StackedBarChart extends Chart {
                 .attr('y', vis.height)
                 .attr('height', 0)
                 .on('mouseover', function (event: any, d: any) {
-                    vis.tooltip.style('opacity', .9);
+                    vis.tooltip.style('opacity', .9).style('display', 'block');
                     vis.tooltip.html(`${d.data.id}<br>${d[1] - d[0]}`)
                         .style('left', (event.pageX - 20) + 'px')
                         .style('top', (event.pageY - 60) + 'px');