diff --git a/index.php b/index.php
index c56266a4..416261ac 100644
--- a/index.php
+++ b/index.php
@@ -115,6 +115,31 @@ else
         <div class="box-body">
           <div class="chart">
             <canvas id="clientsChart" width="800" height="140"></canvas>
+		<style>
+                canvas{
+                        -moz-user-select: none;
+                        -webkit-user-select: none;
+                        -ms-user-select: none;
+                }
+                #chartjs-tooltip {
+                        opacity: 1;
+                        position: absolute;
+                        background: rgba(0, 0, 0, .7);
+                        color: white;
+                        border-radius: 3px;
+                        -webkit-transition: all .1s ease;
+                        transition: all .1s ease;
+                        pointer-events: none;
+                        -webkit-transform: translate(-50%, 0);
+                        transform: translate(-50%, 0);
+                }
+                .chartjs-tooltip-key {
+                        display: inline-block;
+                        width: 20px;
+                        height: 10px;
+                        margin-right: 10px;
+                }
+        </style>
           </div>
         </div>
         <div class="overlay">
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 9f8cb8c6..5dd9e853 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -792,8 +792,12 @@ $(document).ready(function() {
             },
             options: {
                 tooltips: {
-                    enabled: true,
+                    enabled: false,
                     mode: "x-axis",
+                    custom: customTooltips,
+                    itemSort: function(a, b) {
+                        return b.yLabel - a.yLabel
+                    },
                     callbacks: {
                         title: function(tooltipItem, data) {
                             var label = tooltipItem[0].xLabel;
@@ -1025,3 +1029,61 @@ $(document).ready(function() {
         updateForwardDestinationsPie();
     }
 });
+
+var customTooltips = function(tooltip) {
+                        // Tooltip Element
+                        var tooltipEl = document.getElementById('chartjs-tooltip');
+                        if (!tooltipEl) {
+                                tooltipEl = document.createElement('div');
+                                tooltipEl.id = 'chartjs-tooltip';
+                                tooltipEl.innerHTML = '<table></table>';
+                                document.body.appendChild(tooltipEl);
+                        }
+                        // Hide if no tooltip
+                        if (tooltip.opacity === 0) {
+                                tooltipEl.style.opacity = 0;
+                                return;
+                        }
+                        // Set caret Position
+                        tooltipEl.classList.remove('above', 'below', 'no-transform');
+                        if (tooltip.yAlign) {
+                                tooltipEl.classList.add(tooltip.yAlign);
+                        } else {
+                                tooltipEl.classList.add('above');
+                        }
+                        function getBody(bodyItem) {
+                                return bodyItem.lines;
+                        }
+                        // Set Text
+                        if (tooltip.body) {
+                                var titleLines = tooltip.title || [];
+                                var bodyLines = tooltip.body.map(getBody);
+                                var innerHtml = '<thead>';
+                                titleLines.forEach(function(title) {
+                                        innerHtml += '<tr><th>' + title + '</th></tr>';
+                                });
+                                innerHtml += '</thead><tbody>';
+                                bodyLines.forEach(function(body, i) {
+                                        var colors = tooltip.labelColors[i];
+                                        var style = 'background:' + colors.backgroundColor;
+                                        style += '; border-color:' + colors.borderColor;
+                                        style += '; border-width: 2px';
+                                        var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
+                                        innerHtml += '<tr><td>' + span + body + '</td></tr>';
+                                });
+                                innerHtml += '</tbody>';
+                                var tableRoot = tooltipEl.querySelector('table');
+                                tableRoot.innerHTML = innerHtml;
+                        }
+
+                        // Display, position, and set styles for font
+                        var position = this._chart.canvas.getBoundingClientRect();
+                        tooltipEl.style.opacity = 1;
+                        tooltipEl.style.left = position.left + tooltip.caretX + "px";
+                        tooltipEl.style.top = position.top + tooltip.caretY + 'px';
+                        tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
+                        tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
+                        tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
+                        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+
+                };