added-tooltips for icons

Author: harishfalco

packages/app-page-layer/src/PageSelector.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useState } from "react";
 import { useGetPageTableData } from "./hooks/useGetPageTableData";
 import { ArrowDown } from "./icons/ArrowDown";
 import { PageEditor } from "./PageEditor";
-
+import "./stylesheets/formfield.module.css";
 interface PageSelectorProps {}
 
 const styles: { [key: string]: React.CSSProperties } = {
@@ -48,6 +48,8 @@ export const PageSelector: React.FC<PageSelectorProps> = () => {
       onClick={() => {
         setShowPageEditor(true);
       }}
+      data-tooltip="Page Manager"
+      className="tool-tip"
     >
       <div>Page:</div>
       <div style={styles.p}>{selectedPage ? selectedPage.name : null}</div>

packages/app-page-layer/src/stylesheets/formfield.module.css

@@ -1,3 +1,23 @@
 .forminput::placeholder {
   color: #d1d5db;
 }
+
+.tool-tip{
+  position: relative;
+}
+.tool-tip:hover::after{
+  content: attr(data-tooltip);
+  font-family: "Inter", sans-serif;
+  position : absolute;
+  top: 1.7rem;
+  left: -0.5rem;
+  border: 1px #1f2937 solid;
+  color:#e5e7eb;
+  padding: 2px;
+  font-size: 11px;
+  background-color : #111827;
+  z-index: 1;
+  text-transform: capitalize;
+  pointer-events: none;
+}
+

packages/app-template-layer/src/index.tsx

@@ -169,7 +169,7 @@ export default function () {
   return (
     <>
       <Menu name="PageMenu" order={1}>
-        <div style={styles.iconContainer}>
+        <div style={styles.iconContainer}  data-tooltip="Template Manager" className="tool-tip">
           <IconMenu onClick={openDropContainer} active={false}>
             <OpenTemplateIcon />
           </IconMenu>

packages/app-template-layer/src/styles.css

@@ -6,3 +6,22 @@
   display: flex;
   align-items: center;
 }
+
+.tool-tip{
+  position: relative;
+}
+.tool-tip:hover::after{
+  content: attr(data-tooltip);
+  font-family: "Inter", sans-serif;
+  position : absolute;
+  top: 1.7rem;
+  left: -0.5rem;
+  border: 1px #1f2937 solid;
+  color:#e5e7eb;
+  padding: 2px;
+  font-size: 10px;
+  background-color : #111827;
+  z-index: 1;
+  text-transform: capitalize;
+  pointer-events: none;
+}

packages/asset-manager-layer/src/index.tsx

@@ -6,7 +6,7 @@ import {
   UploadContainerProps,
 } from "./components/upload-container/UploadContainer";
 import { ReactComponent as AssetIcon } from "./assets/asset-icon.svg";
-
+import "./styles.css"
 const styles: { [key: string]: React.CSSProperties } = {
   iconContainer: {
     borderRight: `1px solid ${gray800}`,
@@ -23,7 +23,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     padding: "0 1rem",
     gridTemplateColumns: "auto auto",
     columnGap: "15px",
-  },
+  }
 };
 
 const modes: UploadContainerProps["modes"] = ["upload_multiple", "draggable"];
@@ -42,7 +42,7 @@ export default function () {
   return (
     <>
       <Menu name="PageMenu" order={2}>
-        <div style={styles.iconContainer} onClick={showAssetPanelCb}>
+        <div style={styles.iconContainer} onClick={showAssetPanelCb} data-tooltip="Asset Manager" className="tool-tip" >
           <AssetIcon style={styles.assetIcon} />
         </div>
       </Menu>

packages/asset-manager-layer/src/styles.css

@@ -0,0 +1,18 @@
+.tool-tip {
+  position: relative;
+}
+.tool-tip:hover::after {
+  content: attr(data-tooltip);
+  font-family: "Inter", sans-serif;
+  position: absolute;
+  top: 1.7rem;
+  left: -0.5rem;
+  border: 1px #1f2937 solid;
+  color: #e5e7eb;
+  padding: 2px;
+  font-size: 10px;
+  background-color: #111827;
+  z-index: 1;
+  text-transform: capitalize;
+  pointer-events: none;
+}

packages/canvas-breakpoint-layer/src/index.tsx

@@ -7,6 +7,7 @@ import { ReactComponent as Desktop } from "./assets/desktop.svg";
 import { ReactComponent as Tab } from "./assets/tab.svg";
 import { ReactComponent as Landscape } from "./assets/landscape.svg";
 import { ReactComponent as Portrait } from "./assets/portrait.svg";
+import "./styles.css";
 
 const styles: { [key: string]: React.CSSProperties } = {
   iconContainer: {
@@ -47,20 +48,32 @@ export default function () {
     <>
       <CanvasController breakpoint={breakpoint} />
       <Menu name="CanvasMenu" order={0}>
-        <div style={styles.iconContainer}>
+        <div
+          style={styles.iconContainer}
+          data-tooltip="Desktop"
+          className="tool-tip"
+        >
           <IconMenu
             onClick={setDesktop}
             active={breakpoint === breakpoints.desktop}
           >
             <Desktop />
           </IconMenu>
         </div>
-        <div style={styles.iconContainer}>
+        <div
+          style={styles.iconContainer}
+          data-tooltip="Tablet"
+          className="tool-tip"
+        >
           <IconMenu onClick={setTab} active={breakpoint === breakpoints.tablet}>
             <Tab />
           </IconMenu>
         </div>
-        <div style={styles.iconContainer}>
+        <div
+          style={styles.iconContainer}
+          data-tooltip="Mobile Landscape"
+          className="tool-tip"
+        >
           <IconMenu
             onClick={setLandscape}
             active={breakpoint === breakpoints.landscape}
@@ -73,6 +86,8 @@ export default function () {
             ...styles.iconContainer,
             borderRight: `1px solid ${gray800}`,
           }}
+          data-tooltip="Mobile"
+          className="tool-tip"
         >
           <IconMenu
             onClick={setProtrait}

packages/canvas-breakpoint-layer/src/styles.css

@@ -0,0 +1,18 @@
+.tool-tip {
+  position: relative;
+}
+.tool-tip:hover::after {
+  content: attr(data-tooltip);
+  font-family: "Inter", sans-serif;
+  position: absolute;
+  top: 1.7rem;
+  left: -0.5rem;
+  border: 1px #1f2937 solid;
+  color: #e5e7eb;
+  padding: 2px;
+  font-size: 10px;
+  background-color: #111827;
+  z-index: 1;
+  text-transform: capitalize;
+  pointer-events: none;
+}

packages/component-list-layer/src/index.css

@@ -13,3 +13,22 @@
   border-radius: 10px;
   background-color: #6b7280;
 }
+
+.tool-tip{
+  position: relative;
+}
+.tool-tip:hover::after{
+  content: attr(data-tooltip);
+  font-family: "Inter", sans-serif;
+  position : absolute;
+  top: 1.7rem;
+  left: -0.5rem;
+  border: 1px #1f2937 solid;
+  color:#e5e7eb;
+  padding: 2px;
+  font-size: 10px;
+  background-color : #111827;
+  z-index: 1;
+  text-transform: capitalize;
+  pointer-events: none;
+}

packages/component-list-layer/src/index.tsx

@@ -69,7 +69,7 @@ export default function () {
   return (
     <>
       <Menu name="PageMenu" order={0}>
-        <div style={styles.iconContainer}>
+        <div style={styles.iconContainer} data-tooltip="Component Manager" className="tool-tip">
           <IconMenu onClick={onClick} active={false}>
             <Insert />
           </IconMenu>