feat(index.html, style.css): created tool tip (#254)

* created toolTip, to describe the action each element in the sidebar carry out

* feat(index.html, style.css): created tool tip(#248)

* disble tooltip for mobile

* feat: add tooltip text

Co-authored-by: Dunsin <[email protected]>

Author: hunted-Rising

index.html

@@ -97,6 +97,9 @@ <h1 id="head">Code Magic</h1>
             height="20"
           ></iconify-icon>
           <span>Pic-Text</span>
+          <span class="tooltip">
+            Convert Your Image to Character Art
+          </span>
         </li>
         <li data-gen="gradient-text">
           <iconify-icon
@@ -107,6 +110,7 @@ <h1 id="head">Code Magic</h1>
             height="20"
           ></iconify-icon>
           <span>Gradient Text</span>
+          <span class="tooltip">Create Gradient Texts</span>
         </li>
         <li data-gen="gradient-border">
           <iconify-icon
@@ -117,6 +121,7 @@ <h1 id="head">Code Magic</h1>
             height="20"
           ></iconify-icon>
           <span>Gradient Border</span>
+          <span class="tooltip">Create Gradient border for your elements</span>
         </li>
         <li data-gen="gradient-background">
           <iconify-icon
@@ -127,6 +132,7 @@ <h1 id="head">Code Magic</h1>
             height="20"
           ></iconify-icon>
           <span>Gradient Background</span>
+          <span class="tooltip">Create Gradient Background for your websites</span>
         </li>
         <li data-gen="animation">
           <iconify-icon
@@ -137,6 +143,7 @@ <h1 id="head">Code Magic</h1>
             height="20"
           ></iconify-icon>
           <span>Animator</span>
+          <span class="tooltip">Create animations like Fade, Flip, Skew </span>
         </li>
         <li data-gen="border-radius">
           <iconify-icon
@@ -157,6 +164,7 @@ <h1 id="head">Code Magic</h1>
             height="20"
           ></iconify-icon>
           <span>Box Shadow</span>
+          <span class="tooltip">Create Box Shadow for your elements</span>
         </li>
       </ul>
       <footer>

src/style.css

@@ -51,7 +51,6 @@ nav {
   padding: 0 1.5rem;
   min-width: 15vw;
   height: 100vh;
-  overflow: hidden;
   background-color: var(--primary-color);
   z-index: 99;
 }
@@ -97,6 +96,32 @@ nav ul > li span {
   margin-left: 0.2rem;
 }
 
+nav ul > li span.tooltip{
+  position: absolute;
+  right:-140px;
+  padding: 5px;
+  width:145px;
+  color: var(--input-color);
+  background-color: var(--text-color);
+  border-radius: 5px;
+  display: none;
+}
+
+nav ul > li .tooltip::before{
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -8%;
+  margin-top: -5px;
+  border-width: 6px;
+  border-style: solid;
+  border-color: transparent var(--text-color) transparent transparent ;
+}
+
+nav ul > li:hover .tooltip{
+  display: block;
+}
+
 nav ul > li:hover {
   background: linear-gradient(
     80deg,
@@ -602,6 +627,10 @@ a {
     --modal-width: calc(var(--modal-container-width) - 10vw);
   }
 
+  nav ul > li:hover .tooltip{
+    display: none;
+  }
+
   .generator {
     margin: 0.8rem auto;
   }