--- a/client/src/components/gauge/Waterlevel.vue	Wed Mar 27 10:52:09 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Wed Mar 27 10:53:55 2019 +0100
@@ -103,8 +103,6 @@
       text
         fill: #666
         font-size: 12px
-        tspan:last-child
-          font-weight: bold
 </style>
 
 <script>
@@ -649,17 +647,18 @@
 
       // create container for the tooltip
       const tooltip = this.diagram.append("g").attr("class", "chart-tooltip");
-      tooltip.append("rect");
-
-      const padding = 5;
+      tooltip
+        .append("rect")
+        .attr("rx", "0.25rem")
+        .attr("ry", "0.25rem");
 
       // create container for multiple text rows
       const tooltipText = tooltip.append("text").attr("text-anchor", "middle");
-      tooltipText.append("tspan").attr("alignment-baseline", "hanging");
-      tooltipText
-        .append("tspan")
-        .attr("dy", 18)
-        .attr("alignment-baseline", "hanging");
+
+      // padding inside the tooltip box and diagram padding to determine left
+      // and right offset from the diagram boundaries for the tooltip position.
+      const tooltipPadding = 10;
+      const diagramPadding = 5;
 
       eventRect
         .on("mouseover", () => {
@@ -691,44 +690,88 @@
             .style("opacity", 1)
             .attr("transform", `translate(${coords.x}, ${coords.y})`);
 
+          // remove current texts
+          tooltipText.selectAll("tspan").remove();
+
           // write date
-          this.diagram.select(".chart-tooltip text tspan:first-child").text(
-            d.date.toLocaleString([], {
-              year: "2-digit",
-              month: "2-digit",
-              day: "2-digit",
-              hour: "2-digit",
-              minute: "2-digit"
-            })
-          );
-          // write waterlevel
-          this.diagram
-            .select(".chart-tooltip text tspan:last-child")
-            .text(d.waterlevel + " cm");
+          tooltipText
+            .append("tspan")
+            .attr("alignment-baseline", "hanging")
+            .attr("text-anchor", "middle")
+            .text(
+              d.date.toLocaleString([], {
+                year: "2-digit",
+                month: "2-digit",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit"
+              })
+            );
+
+          if (d.predicted) {
+            tooltipText
+              .append("tspan")
+              .attr("x", 0)
+              .attr("y", 0)
+              .attr("dy", "1.3rem")
+              .attr("alignment-baseline", "hanging")
+              .attr("text-anchor", "middle")
+              .text(d.max + " cm");
+            tooltipText
+              .append("tspan")
+              .attr("x", 0)
+              .attr("y", 0)
+              .attr("dy", "2.3rem")
+              .attr("alignment-baseline", "hanging")
+              .attr("text-anchor", "middle")
+              .attr("class", "font-weight-bold")
+              .text(d.waterlevel + " cm");
+            tooltipText
+              .append("tspan")
+              .attr("x", 0)
+              .attr("y", 0)
+              .attr("dy", "3.3rem")
+              .attr("alignment-baseline", "hanging")
+              .attr("text-anchor", "middle")
+              .text(d.min + " cm");
+          } else {
+            tooltipText
+              .append("tspan")
+              .attr("x", 0)
+              .attr("y", 0)
+              .attr("dy", "1.3rem")
+              .attr("alignment-baseline", "hanging")
+              .attr("text-anchor", "middle")
+              .attr("class", "font-weight-bold")
+              .text(d.waterlevel + " cm");
+          }
 
           // get text dimensions
-          const textBBox = this.diagram
-            .select(".chart-tooltip text")
-            .node()
-            .getBBox();
+          const textBBox = tooltipText.node().getBBox();
+          console.log(textBBox);
 
           this.diagram
             .selectAll(".chart-tooltip text tspan")
-            .attr("x", textBBox.width / 2 + padding)
-            .attr("y", padding);
+            .attr("x", textBBox.width / 2 + tooltipPadding)
+            .attr("y", tooltipPadding);
 
           // position and scale tooltip box
-
-          let xMax = this.dimensions.width - textBBox.width;
-          let tooltipX = Math.min(coords.x - textBBox.width / 2, xMax);
-          let tooltipY = coords.y - textBBox.height * 2 + padding * 2;
+          const xMax =
+            this.dimensions.width -
+            (textBBox.width + diagramPadding + tooltipPadding * 2);
+          const tooltipX = Math.max(
+            diagramPadding,
+            Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax)
+          );
+          const tooltipY =
+            coords.y - (textBBox.height + tooltipPadding * 2) - 10;
           this.diagram
             .select(".chart-tooltip")
             .style("opacity", 1)
             .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
             .select("rect")
-            .attr("width", textBBox.width + padding * 2)
-            .attr("height", textBBox.height + padding * 2);
+            .attr("width", textBBox.width + tooltipPadding * 2)
+            .attr("height", textBBox.height + tooltipPadding * 2);
         });
     },
     isNext(seconds) {