Tooltip Component Added

src/components/Navbar/index.js

@@ -4,6 +4,8 @@ import { useLocation, NavLink } from "react-router-dom";
 import { devLogo, wishlist, cart, burger, User } from "../../assets";
 import { useAuth } from "../../Context/auth/auth-context";
 
+import Tooltip from "../Tooltip/Tooltip";
+
 import SidebarNav from "./SidebarNav";
 
 const Navbar = () => {
@@ -49,9 +51,11 @@ const Navbar = () => {
         {!pathArray.some((item) => currentPath.pathname === item) && (
           <div className='auth-link flex jc-between flex-gap'>
             {token ? (
-              <NavLink to='/profile' className='btn btn-icon'>
-                <img src={User} alt='userImage' />
-              </NavLink>
+              <Tooltip info='Profile'>
+                <NavLink to='/profile' className='btn btn-icon'>
+                  <img src={User} alt='userImage' />
+                </NavLink>
+              </Tooltip>
             ) : (
               <>
                 <NavLink to='/login' className='btn auth-login'>
@@ -67,14 +71,18 @@ const Navbar = () => {
 
         <div className='nav-btn flex jc-between flex-gap'>
           <a href='./screens/wishlist.html'>
-            <button className='btn btn-icon'>
-              <img src={wishlist} alt='wishlist_logo' />
-            </button>
+            <Tooltip info='wishlist'>
+              <button className='btn btn-icon'>
+                <img src={wishlist} alt='wishlist_logo' />
+              </button>
+            </Tooltip>
           </a>
           <a href='./screens/mycart.html'>
-            <button className='btn btn-icon'>
-              <img src={cart} alt='cart_icon' />
-            </button>
+            <Tooltip info='cart'>
+              <button className='btn btn-icon'>
+                <img src={cart} alt='cart_icon' />
+              </button>
+            </Tooltip>
           </a>
         </div>
       </div>

src/components/Tooltip/Shape.js

@@ -0,0 +1,9 @@
+const Shape = (props) => {
+  return (
+    <div className='shape flex flex-col ai-center'>
+      <div className='triangle'></div>
+      <div className='tooltip-text'>{props.children}</div>
+    </div>
+  );
+};
+export default Shape;

src/components/Tooltip/Tooltip.js

@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+import "./tooltip.css";
+import Shape from "./Shape";
+const Tooltip = (props) => {
+  const [show, setShow] = useState(false);
+  const onMouseHover = () => setShow(true);
+  const onMouseLeave = () => setShow(false);
+
+  return (
+    <div
+      className='tooltip-content'
+      onMouseOver={onMouseHover}
+      onMouseLeave={onMouseLeave}>
+      {props.children}
+      {show && <Shape>{props.info}</Shape>}
+    </div>
+  );
+};
+
+export default Tooltip;

src/components/Tooltip/tooltip.css

@@ -0,0 +1,14 @@
+.shape {
+  position: absolute;
+  width: 100%;
+}
+.tooltip-text {
+  background-color: #575757;
+  padding: 8px 10px;
+  border-radius: 4px;
+  color: white;
+  font-size: 12px;
+}
+.tooltip-content {
+  position: relative;
+}