Tooltip added

im-rakesh0827 · Aug 31, 2024 · ec182d1 · ec182d1
1 parent 7434095
commit ec182d1
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -33,10 +33,26 @@ <h3>I'm a <span></span></h3>
                 <span style="font-style: italic;">Committed to Crafting Innovative Solutions.</span>
             </p>
             <div class="social-media">
-                <a href="https://github.com/im-rakesh0827"><i class='bx bxl-github'></i></a>
-                <a href="https://www.linkedin.com/in/im-rakesh0827/"><i class='bx bxl-linkedin-square'></i></a>
-                <a href="https://www.instagram.com/im_rakesh0827/"><i class='bx bxl-instagram'></i></a>
-                <a href="https://fueler.io/im_rakesh0827"><i class="bi bxl-medium"></i></a>
+                <a href="https://github.com/im-rakesh0827" class="tooltip" target="_blank">
+                    <i class='bx bxl-github'></i>
+                    <span class="tooltiptext">GitHub</span>
+                </a>
+
+                <a href="https://www.linkedin.com/in/im-rakesh0827/" class="tooltip" target="_blank">
+                    <i class='bx bxl-linkedin-square'></i>
+                    <span class="tooltiptext">LinkedIn</span>
+                </a>
+
+                <a href="https://www.instagram.com/im_rakesh0827/" class="tooltip" target="_blank">
+                    <i class='bx bxl-instagram'></i>
+                    <span class="tooltiptext">Instagram</span>
+                </a>
+
+                <a href="https://fueler.io/im_rakesh0827" class="tooltip" target="_blank">
+                    <i class="bi bxl-medium"></i>
+                    <span class="tooltiptext">Fueler</span>
+                </a>
+
             </div>
             <a href="https://docs.google.com/document/d/1NTVc--xidicPKJguxmb0lHOscecm6MLZ/edit?usp=sharing&ouid=103065912875687167013&rtpof=true&sd=true"
                 class="btn">Download CV

diff --git a/style.css b/style.css
@@ -416,4 +416,51 @@ span{
 
 #profileImage:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5)
+}
+
+
+/* Tooltip container */
+.tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 100px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 5px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    /* Position above the icon */
+    left: 50%;
+    margin-left: -50px;
+    /* Center the tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+/* Tooltip arrow */
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    /* Arrow below the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+/* Show the tooltip text when hovering */
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
 }