diff --git a/dashboard/src/components/GraphItem.vue b/dashboard/src/components/GraphItem.vue
index c8245d3ab..2eb1d66de 100644
--- a/dashboard/src/components/GraphItem.vue
+++ b/dashboard/src/components/GraphItem.vue
@@ -76,9 +76,22 @@ function createGraphOptions({ yscale, period, highMark }) {
             tooltipElem.value.innerHTML = innerHtml;
           }
 
+
           tooltipElem.value.style.opacity = 1;
           tooltipElem.value.style.position = 'absolute';
-          tooltipElem.value.style.left = tooltipModel.caretX + 'px';
+
+          tooltipElem.value.classList.remove('graphs-tooltip-caret-left', 'graphs-tooltip-caret-right');
+
+          if (tooltipModel.chart.width/2 < tooltipModel.caretX) {
+            tooltipElem.value.style.right = (tooltipModel.chart.width - tooltipModel.caretX) + 'px';
+            tooltipElem.value.style.left = 'unset';
+            tooltipElem.value.classList.add('graphs-tooltip-caret-right');
+          } else {
+            tooltipElem.value.style.right = 'unset';
+            tooltipElem.value.style.left = tooltipModel.caretX + 'px';
+            tooltipElem.value.classList.add('graphs-tooltip-caret-left');
+          }
+
           tooltipElem.value.style.top = 0 + 'px';
           tooltipElem.value.style.height = '100%';
         },
@@ -315,17 +328,25 @@ defineExpose({
 
 .graphs-tooltip {
   white-space: nowrap;
-  border-left: 1px var(--pankow-color-primary) solid;
   padding-left: 10px;
+  padding-right: 10px;
   pointer-events: none;
 }
 
+.graphs-tooltip-caret-left {
+  border-left: 1px var(--pankow-color-primary) solid;
+}
+
+.graphs-tooltip-caret-right {
+  border-right: 1px var(--pankow-color-primary) solid;
+}
+
 .graphs-tooltip-title {
   font-weight: bold;
 }
 
 .graphs-tooltip-item {
-  padding: 2px 10px;
+  padding: 2px 0px;
   -webkit-text-stroke: 0.2px gray;
 }