feat: Add tooltip with icon for embedding scenes (#2532)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/actions/actionExport.tsx

@@ -3,12 +3,15 @@ import { EVENT_CHANGE, EVENT_IO, trackEvent } from "../analytics";
 import { load, save, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
+import { Tooltip } from "../components/Tooltip";
+import { questionCircle } from "../components/icons";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { KEYS } from "../keys";
 import { muteFSAbortError } from "../utils";
 import { register } from "./register";
+import "../components/ToolIcon.scss";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
@@ -54,13 +57,20 @@ export const actionChangeExportEmbedScene = register({
     };
   },
   PanelComponent: ({ appState, updateData }) => (
-    <label title={t("labels.exportEmbedScene_details")}>
+    <label style={{ display: "flex" }}>
       <input
         type="checkbox"
         checked={appState.exportEmbedScene}
         onChange={(event) => updateData(event.target.checked)}
       />{" "}
       {t("labels.exportEmbedScene")}
+      <Tooltip
+        label={t("labels.exportEmbedScene_details")}
+        position="above"
+        long={true}
+      >
+        <div className="TooltipIcon">{questionCircle}</div>
+      </Tooltip>
     </label>
   ),
 });

src/components/LayerUI.scss

@@ -39,64 +39,6 @@
         width: 1.2rem;
         height: 1.2rem;
       }
-
-      &.tooltip .tooltip-text {
-        visibility: hidden;
-        width: 20rem;
-        bottom: calc(50% + 0.8rem + 6px);
-
-        :root[dir="ltr"] & {
-          left: -5px;
-        }
-
-        :root[dir="rtl"] & {
-          right: -5px;
-        }
-
-        background-color: $oc-black;
-        color: $oc-white;
-        text-align: center;
-        border-radius: 6px;
-        padding: 5px;
-        position: absolute;
-        z-index: 10;
-        font-size: 13px;
-        line-height: 1.5;
-        white-space: pre-wrap;
-
-        &::after {
-          --size: 6px;
-          content: "";
-          border: var(--size) solid transparent;
-          border-top-color: $oc-black;
-          position: absolute;
-          bottom: calc(-2 * var(--size));
-
-          :root[dir="ltr"] & {
-            left: calc(5px + var(--size) / 2);
-          }
-
-          :root[dir="rtl"] & {
-            right: calc(5px + var(--size) / 2);
-          }
-        }
-      }
-
-      // the following 3 rules ensure that the tooltip doesn't show (nor affect
-      // the cursor) when you drag over when you draw on canvas, but at the same
-      // time it still works when clicking on the link/shield
-
-      body:active &.tooltip:not(:hover) {
-        pointer-events: none;
-      }
-
-      body:not(:active) &.tooltip:hover .tooltip-text {
-        visibility: visible;
-      }
-
-      .tooltip-text:hover {
-        visibility: visible;
-      }
     }
 
     &__github-corner {

src/components/LayerUI.tsx

@@ -320,7 +320,6 @@ const LayerUI = ({
 }: LayerUIProps) => {
   const isMobile = useIsMobile();
 
-  // TODO: Extend tooltip component and use here.
   const renderEncryptedIcon = () => (
     <a
       className={clsx("encrypted-icon tooltip zen-mode-visibility", {
@@ -333,10 +332,9 @@ const LayerUI = ({
         trackEvent(EVENT_EXIT, "e2ee shield");
       }}
     >
-      <span className="tooltip-text" dir="auto">
+      <Tooltip label={t("encrypted.tooltip")} position="above" long={true}>
-        {t("encrypted.tooltip")}
+        {shield}
-      </span>
+      </Tooltip>
-      {shield}
     </a>
   );
 

src/components/ToolIcon.scss

@@ -1,4 +1,6 @@
 @import "open-color/open-color.scss";
+@import "../css/variables";
+
 .excalidraw {
   .ToolIcon {
     display: inline-flex;
@@ -181,6 +183,17 @@
     }
   }
 
+  .TooltipIcon {
+    width: 0.9em;
+    height: 0.9em;
+    margin-left: 5px;
+    margin-top: 1px;
+
+    @media #{$media-query} {
+      display: none;
+    }
+  }
+
   .unlocked-icon {
     :root[dir="ltr"] & {
       left: 2px;

src/components/Tooltip.scss

@@ -7,39 +7,56 @@
   .Tooltip__label {
     --arrow-size: 4px;
     visibility: hidden;
-    width: 10ch;
     background: $oc-black;
     color: $oc-white;
     text-align: center;
-    border-radius: 4px;
+    border-radius: 6px;
-    padding: 4px;
+    padding: 8px;
     position: absolute;
     z-index: 10;
-    font-size: 0.7rem;
+    font-size: 13px;
     line-height: 1.5;
-    top: calc(100% + var(--arrow-size) + 3px);
+    font-weight: 500;
     // extra pixel offset for unknown reasons
-    left: calc(-50% + var(--arrow-size) / 2 - 1px);
+    left: calc(50% + var(--arrow-size) / 2 - 1px);
+    transform: translateX(-50%);
     word-wrap: break-word;
 
     &::after {
       content: "";
       border: var(--arrow-size) solid transparent;
-      border-bottom-color: $oc-black;
       position: absolute;
-      bottom: 100%;
       left: calc(50% - var(--arrow-size));
     }
+
+    &--above {
+      bottom: calc(100% + var(--arrow-size) + 3px);
+
+      &::after {
+        border-top-color: $oc-black;
+        top: 100%;
+      }
+    }
+
+    &--below {
+      top: calc(100% + var(--arrow-size) + 3px);
+
+      &::after {
+        border-bottom-color: $oc-black;
+        bottom: 100%;
+      }
+    }
   }
 
   // the following 3 rules ensure that the tooltip doesn't show (nor affect
   // the cursor) when you drag over when you draw on canvas, but at the same
   // time it still works when clicking on the link/shield
-  body:active .Tooltip:not(:hover) {
+
+  body:active & .Tooltip:not(:hover) {
     pointer-events: none;
   }
 
-  body:not(:active) .Tooltip:hover .Tooltip__label {
+  body:not(:active) & .Tooltip:hover .Tooltip__label {
     visibility: visible;
   }
 

src/components/Tooltip.tsx

@@ -5,11 +5,27 @@ import React from "react";
 type TooltipProps = {
   children: React.ReactNode;
   label: string;
+  position?: "above" | "below";
+  long?: boolean;
 };
 
-export const Tooltip = ({ children, label }: TooltipProps) => (
+export const Tooltip = ({
+  children,
+  label,
+  position = "below",
+  long = false,
+}: TooltipProps) => (
   <div className="Tooltip">
-    <span className="Tooltip__label">{label}</span>
+    <span
+      className={
+        position === "above"
+          ? "Tooltip__label Tooltip__label--above"
+          : "Tooltip__label Tooltip__label--below"
+      }
+      style={{ width: long ? "50ch" : "10ch" }}
+    >
+      {label}
+    </span>
     {children}
   </div>
 );

src/components/icons.tsx

@@ -108,6 +108,11 @@ export const redo = createIcon(
   { mirror: true },
 );
 
+export const questionCircle = createIcon(
+  "M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z",
+  { mirror: true },
+);
+
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(

src/packages/excalidraw/CHANGELOG.MD

@@ -26,6 +26,7 @@ Please add the latest change on the top under the correct section.
 - Fix Library Menu Layout [#2502](https://github.com/excalidraw/excalidraw/pull/2502)
 
 ### Improvements
+- Add tooltip with icon for embedding scenes [#2532](https://github.com/excalidraw/excalidraw/pull/2532)
 - RTL support for the stats dialog [#2530](https://github.com/excalidraw/excalidraw/pull/2530)
 - Expand canvas padding based on zoom. [#2515](https://github.com/excalidraw/excalidraw/pull/2515)
 - Hide shortcuts on pickers for mobile [#2508](https://github.com/excalidraw/excalidraw/pull/2508)