--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 21 17:11:39 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 21 17:38:54 2019 +0200
@@ -432,6 +432,7 @@
       this.drawBars();
       this.drawScaleLabel();
       this.drawScale();
+      this.drawTooltip();
     },
     generateDiagramContainer() {
       const diagram = d3
@@ -443,6 +444,14 @@
         .append("g")
         .attr("transform", `translate(0 ${this.paddingTop})`);
     },
+    drawTooltip() {
+      this.diagram
+        .append("text")
+        .text("banane")
+        .attr("font-size", "0.8em")
+        .attr("opacity", 0)
+        .attr("id", "tooltip");
+    },
     drawBars() {
       const everyBar = this.diagram
         .selectAll("g")
@@ -467,6 +476,27 @@
         .data(d => d.lowerLevels)
         .enter()
         .append("rect")
+        .on("mouseover", function() {
+          d3.select(this).attr("opacity", "0.8");
+          d3.select("#tooltip").attr("opacity", 1);
+        })
+        .on("mouseout", function() {
+          d3.select(this).attr("opacity", 1);
+          d3.select("#tooltip").attr("opacity", 0);
+        })
+        .on("mousemove", function(d) {
+          let y = d3.mouse(this)[1];
+          const dy = document
+            .querySelector(".diagram-container")
+            .getBoundingClientRect().left;
+          const value = Number.parseFloat(hoursInDays(d.height)).toFixed(2);
+          d3.select("#tooltip")
+            .text(value)
+            .attr("y", y - 10)
+            .attr("x", d3.event.pageX - dy);
+          //d3.event.pageX gives coordinates relative to SVG
+          //dy gives offset of svg on page
+        })
         .attr("y", d => {
           return 2 * this.yScale(0) - this.yScale(hoursInDays(d.translateY));
         })
@@ -485,6 +515,27 @@
       const height = this.fnheight("ldc");
       everyBar
         .append("rect")
+        .on("mouseover", function() {
+          d3.select(this).attr("opacity", "0.8");
+          d3.select("#tooltip").attr("opacity", 1);
+        })
+        .on("mouseout", function() {
+          d3.select(this).attr("opacity", 1);
+          d3.select("#tooltip").attr("opacity", 0);
+        })
+        .on("mousemove", function(d) {
+          let y = d3.mouse(this)[1];
+          const dy = document
+            .querySelector(".diagram-container")
+            .getBoundingClientRect().left;
+          const value = Number.parseFloat(hoursInDays(d.height)).toFixed(2);
+          d3.select("#tooltip")
+            .text(value)
+            .attr("y", y - 10)
+            .attr("x", d3.event.pageX - dy);
+          //d3.event.pageX gives coordinates relative to SVG
+          //dy gives offset of svg on page
+        })
         .attr("y", this.yScale(0))
         .attr("height", height)
         .attr("width", this.barsWidth)
@@ -496,6 +547,27 @@
       const height = this.fnheight("highestLevel");
       everyBar
         .append("rect")
+        .on("mouseover", function() {
+          d3.select(this).attr("opacity", "0.8");
+          d3.select("#tooltip").attr("opacity", 1);
+        })
+        .on("mouseout", function() {
+          d3.select(this).attr("opacity", 1);
+          d3.select("#tooltip").attr("opacity", 0);
+        })
+        .on("mousemove", function(d) {
+          let y = d3.mouse(this)[1];
+          const dy = document
+            .querySelector(".diagram-container")
+            .getBoundingClientRect().left;
+          const value = Number.parseFloat(hoursInDays(d.height)).toFixed(2);
+          d3.select("#tooltip")
+            .text(value)
+            .attr("y", y - 10)
+            .attr("x", d3.event.pageX - dy);
+          //d3.event.pageX gives coordinates relative to SVG
+          //dy gives offset of svg on page
+        })
         .attr("y", this.yScale(0))
         .attr("height", height)
         .attr("width", this.barsWidth - 5)