From b3aae7b837ba4bd16de74cab690793c54052f9e9 Mon Sep 17 00:00:00 2001
From: Aetherinox <aetherinox@proton.me>
Date: Thu, 10 Apr 2025 02:19:48 -0700
Subject: [PATCH] feat: add bootstrap tooltips

---
 tvapp2/www/css/tvapp2.min.css | 36 ++++++++++++++++++++++++++++++++
 tvapp2/www/index.html         | 39 ++++++++++++++++++++++++-----------
 2 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/tvapp2/www/css/tvapp2.min.css b/tvapp2/www/css/tvapp2.min.css
index 67c2a22c..7084ec8f 100644
--- a/tvapp2/www/css/tvapp2.min.css
+++ b/tvapp2/www/css/tvapp2.min.css
@@ -1,3 +1,7 @@
+/*
+    Boostrap 5 > Table
+*/
+
 .table
 {
     --bs-table-bg: #1b1b1b;
@@ -9,6 +13,38 @@
     --bs-table-bg-type: #242424;
 }
 
+/*
+    Boostrap 5 > Tooltips
+*/
+
+.tooltip-inner
+{
+    background-color: #3061a1;
+    box-shadow: 0px 0px 4px black;
+    opacity: 1;
+    color: #FFF;
+}
+
+.tooltip.bs-tooltip-right .tooltip-arrow::before
+{
+    border-right-color: #3061a1 !important;
+}
+
+.tooltip.bs-tooltip-left .tooltip-arrow::before
+{
+    border-left-color: #3061a1 !important;
+}
+
+.tooltip.bs-tooltip-bottom .tooltip-arrow::before
+{
+    border-bottom-color: #3061a1 !important;
+}
+
+.tooltip.bs-tooltip-top .tooltip-arrow::before
+{
+    border-top-color: #3061a1 !important;
+}
+
 body
 {
     background-color:               #f8f9fa;
diff --git a/tvapp2/www/index.html b/tvapp2/www/index.html
index 975a65e2..60dc919a 100644
--- a/tvapp2/www/index.html
+++ b/tvapp2/www/index.html
@@ -17,18 +17,18 @@
         <div class="header">
             <nav class="navbar sticky-top container">
                 <div class="navbar-brand">
-                    <i class="logo fa-sharp-duotone fa-regular fa-tv" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i>
+                    <i data-bs-toggle="tooltip" title="v<%= appVersion %>" class="logo fa-sharp-duotone fa-regular fa-tv" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i>
                     <a class="header-name" href="<%= appUrlGithub %>">TVApp2 for Docker</a>
                 </div>
                 <div class="navbar-social">
-                    <a href="javascript:doResync();"><i class="restart fa-solid fa-rotate" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
-                    <a href="<%= appUrlDocs %>"><i class="logo fa-duotone fa-solid fa-book-open-cover" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
-                    <a href="<%= appUrlGithub %>"><i class="logo fa-logos fa-github" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
-                    <a href="<%= appUrlDiscord %>"><i class="logo fa-logos fa-discord" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
+                    <a href="javascript:runResync();"><i id="action-resync" data-bs-toggle="tooltip" title="Resync" class="restart fa-solid fa-rotate" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
+                    <a href="<%= appUrlDocs %>"><i data-bs-toggle="tooltip" title="Documentation" class="logo fa-duotone fa-solid fa-book-open-cover" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
+                    <a href="<%= appUrlGithub %>"><i data-bs-toggle="tooltip" title="Github" class="logo fa-logos fa-github" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
+                    <a href="<%= appUrlDiscord %>"><i data-bs-toggle="tooltip" title="Discord" class="logo fa-logos fa-discord" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i></a>
                 </div>
             </nav>
         </div>
-
+    
         <!-- Header Notification: description -->
         <div class="container">
             <div class="container header-container">
@@ -71,7 +71,7 @@
                                 <!-- <i class="fa fa-fw fa-solid fa-file-lines" aria-hidden="true"></i> -->
                             </td>
                             <td class="file cell-file">
-                                <a id="m3u-name" target="_blank"></a>
+                                <a id="m3u-name" target="_blank" data-bs-toggle="tooltip" title="IPTV channel list"></a>
                             </td>
                             <td class="link cell-link"><a id="m3u-link" target="_blank"></a></td>
                             <td class="size cell-size"><span id="m3u-size"></span></td>
@@ -86,7 +86,7 @@
                                 <!-- <i class="fa fa-fw fa-solid fa-file-lines" aria-hidden="true"></i> -->
                             </td>
                             <td class="file cell-file">
-                                <a id="xml-name" target="_blank"></a>
+                                <a id="xml-name" target="_blank" data-bs-toggle="tooltip" title="Uncompressed TV guide data"></a>
                             </td>
                             <td class="link cell-link"><a id="xml-link" target="_blank"></a></td>
                             <td class="size cell-size"><span id="xml-size"></span></td>
@@ -101,7 +101,7 @@
                                 <!-- <i class="fa fa-fw fa-solid fa-file-lines" aria-hidden="true"></i> -->
                             </td>
                             <td class="file cell-gzp">
-                                <a id="gzp-name" target="_blank"></a>
+                                <a id="gzp-name" target="_blank" data-bs-toggle="tooltip" title="Compressed TV guide data"></a>
                             </td>
                             <td class="link cell-link"><a id="gzp-link" target="_blank"></a></td>
                             <td class="size cell-size"><span id="gzp-size"></span></td>
@@ -123,7 +123,7 @@
             <div class="footer-inner">
                 <div class="container">
                     <div class="col text-center text-muted text-small text-nowrap">
-                        <small>Developed by BinaryNinja - <a href="<%= appUrlGithub %>"><%= appName %></a> - v<%= appVersion %></small><br />
+                        <small>Developed by BinaryNinja - <a data-bs-toggle="tooltip" title="<%= appRelease %> build" href="<%= appUrlGithub %>"><%= appName %> (<%= appRelease %>)</a> - v<%= appVersion %></small><br />
                         <small>This utility is for educational purposes only</small>
                     </div>
                 </div>
@@ -183,6 +183,11 @@
             };
             */
 
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new bootstrap.Tooltip(tooltipTriggerEl)
+            })
+
             const urlBase = window.location.origin;
             const urlM3U = urlBase + '/playlist';
             const urlXML = urlBase + '/epg';
@@ -212,6 +217,14 @@
 
         <script>
 
+            /*
+                Document Ready
+            */
+
+            $(function(){
+                $("[data-bs-toggle=tooltip]").tooltip({ placement: 'bottom'});
+            });
+
             /*
                 Action > DOM Status
             */
@@ -220,10 +233,12 @@
                 $("#tvapp2Toast").toast();
             });
 
+            /*
             document.addEventListener("DOMContentLoaded", function() {
-                /* $('#tvapp2Toast').toast("show"); */
+                $('#tvapp2Toast').toast("show");
             });
-
+            */
+            
             /*
                 Notify > Localhost
             */