gridviz 2.0.34 → 2.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.0.34",
+    "version": "2.0.36",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/App.js

@@ -186,7 +186,7 @@ export class App {
         this.legendDivId = opts.legendDivId || 'gvizLegend'
         this.legend = select('#' + this.legendDivId)
         if (this.legend.empty()) {
-            this.legend = select('body')
+            this.legend = select('#' + container.id)
                 .append('div')
                 .attr('id', this.legendDivId)
                 .style('position', 'absolute')
@@ -206,6 +206,10 @@ export class App {
 
         //tooltip
 
+        // set App container as default parent element for tooltip
+        if (!opts.tooltip) opts.tooltip = {}
+        if (!opts.tooltip.parentElement) opts.tooltip.parentElement = container
+
         /**
          * @private
          * @type {Tooltip} */

package/src/Tooltip.js

@@ -44,12 +44,17 @@ export class Tooltip {
         this.yMouseOffset = opts.yMouseOffset || 0
         /** @type {number} */
         this.xMouseOffset = opts.xMouseOffset || 0
+        /** @type {HTMLElement} */
+        this.parentElement = opts.parentElement || document.body
 
         /**
          * @private
          * @type {import("d3-selection").Selection} */
         this.tooltip = select('#' + this.div)
-        if (this.tooltip.empty()) this.tooltip = select('body').append('div').attr('id', this.div)
+        if (this.tooltip.empty())
+            this.tooltip = select('#' + this.parentElement.id)
+                .append('div')
+                .attr('id', this.div)
 
         //initialise
         this.tooltip.style('max-width', this.maxWidth)
@@ -64,6 +69,9 @@ export class Tooltip {
         this.tooltip.style('position', 'absolute')
         this.tooltip.style('pointer-events', 'none')
         this.tooltip.style('opacity', '0')
+
+        // aria-labels (thanks to wahlatlas)
+        this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
     }
 
     /** Show the tooltip */
@@ -94,6 +102,8 @@ export class Tooltip {
         this.tooltip
             .style('left', event.pageX + this.xOffset + 'px')
             .style('top', event.pageY - this.yOffset + 'px')
+
+        this.ensureTooltipInsideContainer(event)
     }
 
     /*
@@ -101,12 +111,12 @@ export class Tooltip {
 		if (html) my.html(html);
 		my.setPosition(event);
 		my.show()
-		//this.ensureTooltipOnScreen();
+		//this.ensureTooltipInsideContainer();
 	};
 	
 	my.mousemove = function (event) {
 		my.setPosition(event);
-		//this.ensureTooltipOnScreen();
+		//this.ensureTooltipInsideContainer();
 	};
 	
 	my.mouseout = function () {
@@ -126,25 +136,29 @@ export class Tooltip {
     }
 
     /**
-     * @function ensureTooltipOnScreen
-     * @description Prevents the tooltip from overflowing off screen
+     * @function ensureTooltipInsideContainer
+     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
+     * @param {MouseEvent} event
      */
-    /*my.ensureTooltipOnScreen = function () {
-		// TODO: parent needs to be the all-encompassing container, not the map SVG id otherwise it just uses the last SVG which will be an inset SVG.
-		let parent = document.getElementById(config.parentContainerId);
-		let bbox = parent.getBBox();
-		let parentWidth = bbox.width;
-		let parentHeight = bbox.height;
-		let node = tooltip.node();
-		//too far right
-		if (node.offsetLeft > parentWidth - node.clientWidth) {
-			node.style.left = node.offsetLeft - (node.clientWidth + config.xOffset * 2) + "px";
-	
-		}
-		//too far down
-		if (node.offsetTop + node.clientHeight > parentHeight) {
-			node.style.top = node.offsetTop - (node.clientHeight + config.yOffset * 2) + "px";
-		}
-	
-	}*/
+    ensureTooltipInsideContainer = function (event) {
+        let ttNode = this.tooltip.node()
+        let parentRect = this.parentElement.getBoundingClientRect()
+
+        //too far right
+        if (ttNode.offsetLeft > parentRect.left + parentRect.width - ttNode.clientWidth) {
+            let left = event.pageX - ttNode.clientWidth - this.xOffset
+            ttNode.style.left = left + 'px'
+            // check if mouse covers tooltip
+            if (ttNode.offsetLeft + ttNode.clientWidth > event.pageX) {
+                //move tooltip left so it doesnt cover mouse
+                let left2 = event.pageX - (ttNode.clientWidth + this.xOffset)
+                ttNode.style.left = left2 + 'px'
+            }
+        }
+
+        //too far down
+        if (event.pageY + ttNode.clientHeight > parentRect.top + parentRect.height) {
+            ttNode.style.top = event.pageY - ttNode.clientHeight + 'px'
+        }
+    }
 }