[Bug fix] Tooltip support added for Theme & Settings in the Navigation bar (#1947)

* length of card which was getting displayed on hovering is reduced

* issue #1818 solved

* issue #1818 fixed

* theme.css changed to previous code

* issue #1801 fixed

* navbar.html updated

* multi language fixed

src/main/resources/static/css/navbar.css

@@ -128,6 +128,34 @@ span.icon-text::after {
   color: var(--md-sys-color-on-surface-variant);
 }
 
+.nav-item {
+  position: relative;
+}
+
+.tooltip-text {
+  visibility: hidden;
+  background-color: rgb(71 67 67 / 80%);
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 12px;
+  white-space: nowrap;
+  margin-top: 5px;
+}
+
+.nav-item:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
 .dropdown-menu.scrollable-y {
   overflow-y: scroll;
   height: 360px;

src/main/resources/static/css/theme/font.css

@@ -19,4 +19,4 @@
     direction: ltr;
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
-}
+}

src/main/resources/templates/fragments/navbar.html

@@ -316,7 +316,7 @@
               <span class="material-symbols-rounded" id="dark-mode-icon">
                 dark_mode
               </span>
-              <span class="icon-text icon-hide" id="dark-mode-text" th:data-text="#{navbar.darkmode}" th:text="#{navbar.darkmode}"></span>
+              <span class="icon-text icon-hide tooltip-text" id="dark-mode-text" th:data-text="#{navbar.darkmode}" th:text="#{navbar.darkmode}"></span>
             </a>
           </li>
           <li class="nav-item dropdown">
@@ -360,7 +360,7 @@
               <span class="material-symbols-rounded">
                 settings
               </span>
-              <span class="icon-text icon-hide" th:data-text="#{navbar.settings}" th:text="#{navbar.settings}"></span>
+              <span class="icon-text icon-hide tooltip-text" th:data-text="#{navbar.settings}" th:text="#{navbar.settings}"></span>
             </a>
           </li>
         </ul>