fix: tooltip position out of view area

xidedix · xidedix · commit bc6b0b18da7e · 2019-05-30T13:37:44.000+02:00
diff --git a/js/custom-tooltips.js b/js/custom-tooltips.js
@@ -120,13 +120,26 @@ function CustomTooltips(tooltipModel) {
     tooltip.appendChild(tooltipBody)
   }
 
+  const position = this._chart.canvas.getBoundingClientRect()
+
   const positionY = this._chart.canvas.offsetTop
   const positionX = this._chart.canvas.offsetLeft
 
+  let positionLeft = positionX + tooltipModel.caretX
+  const positionTop = positionY + tooltipModel.caretY
+  // eslint-disable-next-line
+  const halfWidth = tooltipModel.width / 2
+
+  if (positionLeft + halfWidth > position.width) {
+    positionLeft -= halfWidth
+  } else if (positionLeft < halfWidth) {
+    positionLeft += halfWidth
+  }
+
   // Display, position, and set styles for font
   tooltip.style.opacity = 1
-  tooltip.style.left = `${positionX + tooltipModel.caretX}px`
-  tooltip.style.top = `${positionY + tooltipModel.caretY}px`
+  tooltip.style.left = `${positionLeft}px`
+  tooltip.style.top = `${positionTop}px`
 }
 
 export default CustomTooltips
