Add tooltip explaining you can zoom and pan the graphs

Signed-off-by: DL6ER <dl6er@dl6er.de>

index.lp

@@ -83,6 +83,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
         <div class="box" id="queries-over-time">
             <div class="box-header with-border">
                 <h3 class="box-title">Total queries over last 24 hours</h3>
+                <span class="pull-right" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
             </div>
             <div class="box-body">
                 <div class="chart" style="width: 100%; height: 180px">
@@ -101,6 +102,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
         <div class="box" id="clients">
             <div class="box-header with-border">
                 <h3 class="box-title">Client activity over last 24 hours</h3>
+                <span class="pull-right" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
             </div>
             <div class="box-body">
                 <div class="chart" style="width: 100%; height: 180px">

scripts/pi-hole/js/index.js

@@ -832,3 +832,8 @@ $(function () {
 window.addEventListener("resize", function () {
   $(".chartjs-tooltip").remove();
 });
+
+// Tooltips
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip({ html: true, container: "body" });
+});