From 6eb7440a21cd910b380d9eb3eb4cbb296f916963 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 7 Nov 2023 21:45:48 +0100
Subject: [PATCH] Add tooltip explaining you can zoom and pan the graphs

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 index.lp                    | 2 ++
 scripts/pi-hole/js/index.js | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/index.lp b/index.lp
index 6d310747..f118a289 100644
--- a/index.lp
+++ b/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">
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index c1fe1731..6c364896 100644
--- a/scripts/pi-hole/js/index.js
+++ b/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" });
+});