fix: tooltip position out of view area

coreui · May 30, 2019 · bc6b0b1 · bc6b0b1
1 parent c7e516e
commit bc6b0b1
Showing 1 changed file with 15 additions and 2 deletions.
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