--- a/static/candolint.css	Tue Oct 03 19:53:50 2017 +0800
+++ b/static/candolint.css	Tue Oct 03 19:58:24 2017 +0800
@@ -90,6 +90,11 @@
     max-height: 130px;
 }
 
+.chart-tooltip {
+    padding: 10px;
+    pointer-events: none;
+}
+
 .check-log {
     background: #3c3c3c;
     color: white;

--- a/static/candolint.js	Tue Oct 03 19:53:50 2017 +0800
+++ b/static/candolint.js	Tue Oct 03 19:58:24 2017 +0800
@@ -37,6 +37,7 @@
     if ($('#check-chart-data, #check-chart').length !== 2) { return; }
     var data = JSON.parse($('#check-chart-data').text());
     var $container = $('.chart-container');
+    var $tooltip = $container.find('.chart-tooltip');
     var svg = d3.select('#check-chart');
     var margin = {top: 10, right: 45, bottom: 30, left: 45};
     var padding = 8;
@@ -49,6 +50,11 @@
     var formatDuration = function(d) {
         return moment.utc(d, 'X').format('m:ss');
     };
+    var config = [
+        {name: 'duration', color: '#00a8e6', scale: y2, format: formatDuration},
+        {name: 'warnings', color: '#faa732', scale: y1},
+        {name: 'errors', color: '#da314b', scale: y1}
+    ];
 
     var render = function() {
         svg.attr('width', $container.width());
@@ -90,11 +96,7 @@
             .attr('transform', 'translate(' + (width + padding) + ',0)')
             .call(d3.axisRight(y2).ticks(5).tickFormat(formatDuration));
 
-        $.each([
-            {name: 'duration', color: '#00a8e6', axis: y2},
-            {name: 'warnings', color: '#faa732', axis: y1},
-            {name: 'errors', color: '#da314b', axis: y1}
-        ], function(i, series) {
+        $.each(config, function(i, series) {
             var sg = g.append('g')
                 .attr('fill', series.color)
                 .attr('stroke', 'white')
@@ -103,7 +105,7 @@
             var line = d3.line()
                 .defined(function(d) { return d[series.name] !== null; })
                 .x(function(d) { return x(d.ordinal); })
-                .y(function(d) { return series.axis(d[series.name]); });
+                .y(function(d) { return series.scale(d[series.name]); });
 
             sg.append('path')
                 .datum(data.points)
@@ -118,7 +120,7 @@
                 .append('circle')
                 .attr('r', 5)
                 .attr('cx', function(d) { return x(d.ordinal); })
-                .attr('cy', function(d) { return series.axis(d[series.name]); });
+                .attr('cy', function(d) { return series.scale(d[series.name]); });
         });
 
         var rectW = x.step();
@@ -134,12 +136,24 @@
             .attr('y', -margin.top)
             .attr('height', height + margin.top + margin.bottom)
             .attr('width', rectW)
+            .on('mousemove', function(d) {
+                $tooltip.removeClass('uk-hidden').css({
+                    left: x(d.ordinal) + margin.left + 10,
+                    top: d3.event.layerY + 10
+                });
+            })
             .on('mouseover', function(d) {
                 var hx = x(d.ordinal) + 0.5;
                 hover.attr('opacity', 1).attr('x1', hx).attr('x2', hx);
+                $.each(config, function(i, series) {
+                    var value = d[series.name];
+                    var text = series.format ? series.format(value) : value;
+                    $tooltip.find('[data-point="' + series.name + '"]').text(text);
+                });
             })
             .on('mouseout', function(d) {
                 hover.attr('opacity', 0);
+                $tooltip.addClass('uk-hidden');
             });
     };
     $(window).on('resize', function() {

--- a/templates/check.html	Tue Oct 03 19:53:50 2017 +0800
+++ b/templates/check.html	Tue Oct 03 19:58:24 2017 +0800
@@ -69,7 +69,19 @@
       </p>
     {% end %}
     {% if chart %}
-      <div class="chart-container"><svg id="check-chart"></svg></div>
+      <div class="uk-position-relative chart-container">
+        <svg id="check-chart"></svg>
+        <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-display-inline-block uk-position-absolute uk-hidden chart-tooltip">
+          <dl class="uk-description-list-horizontal list-terse">
+            <dt>Warnings:</dt>
+            <dd data-point="warnings">0</dd>
+            <dt>Errors:</dt>
+            <dd data-point="errors">0</dd>
+            <dt>Duration:</dt>
+            <dd data-point="duration">0</dd>
+          </dl>
+        </div>
+      </div>
       <script type="application/json" id="check-chart-data">{% raw json_encode(chart) %}</script>
     {% end %}
     {% include ui/check-log.html %}