Fix tooltip style

Author: mooniiDev

css/styles.css

@@ -150,13 +150,11 @@ button:focus {
   color: var(--red);
 }
 
-#footer {
-  position: fixed;
-  bottom: 0;
-  padding: 0 0 30px 0;
-}
 /* TOOLTIP STYLE */
-.hover-icon .tooltip-text {
+.project-info {
+  cursor: pointer;
+}
+.project-info .tooltip-text {
   visibility: hidden;
   padding: 10px;
   position: absolute;
@@ -167,17 +165,24 @@ button:focus {
   z-index: 1;
   bottom: 100%;
 }
-.hover-icon:hover .tooltip-text {
+.project-info:hover .tooltip-text {
   visibility: visible;
 }
-#crafted-by {
-  margin-bottom: 0;
+
+/* FOOTER */
+#footer {
+  position: fixed;
+  bottom: 0;
+  padding: 0 0 30px 0;
 }
 #footer a {
   text-decoration: none;
   color: #1F3E59;
   font-weight: 900;
 }
+#crafted-by {
+  margin-bottom: 0;
+}
 
 /* LIBRARY INFO STYLE */
 #library-content {

index.html

@@ -61,7 +61,7 @@ <h1 id="logo"><i class="fad fa-books theme-books"></i> Library</i></h1>
 
     <footer id="footer">
       <p class="project-info">
-        <i class="fas fa-info-circle"></i>
+        <i class="fas fa-info-circle hover-icon"></i>
         <span class="tooltip-text">
           This is a small Library App, where you can add new books,
           delete old ones, change status of your books to read/unread and see your library statistics.