diff --git a/index.php b/index.php
index 37bf08c3..95d264e9 100644
--- a/index.php
+++ b/index.php
@@ -149,10 +149,10 @@
         </div>
         <div class="box-body">
           <div class="float-left" style="width:50%">
-            <canvas id="forwardDestinationPieChart" width="120" height="120"></canvas>
+            <canvas id="forwardDestinationPieChart" width="120" height="120" class="extratooltipcanvas"></canvas>
           </div>
           <div class="float-left" style="width:50%">
-            <div id="forward-destinations-legend" class="chart-legend"></div>
+            <div id="forward-destinations-legend" class="chart-legend" class="extratooltipcanvas"></div>
           </div>
         </div>
         <div class="overlay">
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 8c28f0bf..5584737c 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -81,7 +81,9 @@ var customTooltips = function(tooltip) {
                         style += "; border-width: 2px";
                         var span = "<span class=\"chartjs-tooltip-key\" style=\"" + style +  "\"></span>";
                         var num = body[0].split(": ");
-                        if(num[1] > 0)
+                        // remove percent symbol from amount to allow numeric comparison
+                        var number = num[1].replace(/%/i,"");
+                        if(number > 0)
                         {
                             innerHtml += "<tr><td>" + span + body + "</td></tr>";
                             printed++;
@@ -1146,7 +1148,8 @@ $(document).ready(function() {
                     display: false
                 },
                 tooltips: {
-                    enabled: true,
+                    enabled: false,
+                    custom: customTooltips,
                     callbacks: {
                         title: function(tooltipItem, data) {
                             return "Query types";
@@ -1183,7 +1186,8 @@ $(document).ready(function() {
                     display: false
                 },
                 tooltips: {
-                    enabled: true,
+                    enabled: false,
+                    custom: customTooltips,
                     callbacks: {
                         title: function(tooltipItem, data) {
                             return "Forward destinations";