refactor(web): duplicate EditorTooltip in frontend as SimpleTooltip f…

…or now
serlo · Jan 9, 2025 · 199c459 · 199c459
1 parent d255e57
commit 199c459
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/apps/web/src/components/content/license/exercise-license-notice.tsx b/apps/web/src/components/content/license/exercise-license-notice.tsx
@@ -1,9 +1,9 @@
-import { EditorTooltip } from '@editor/editor-ui/editor-tooltip'
 import { faCreativeCommons } from '@fortawesome/free-brands-svg-icons'
 import { faSlash } from '@fortawesome/free-solid-svg-icons'
 
 import { Link } from '../link'
 import { FaIcon } from '@/components/fa-icon'
+import { SimpleTooltip } from '@/components/simple-tooltip'
 import { useInstanceData } from '@/contexts/instance-context'
 import { getLicense } from '@/data/licenses/licenses-helpers'
 import { cn } from '@/helper/cn'
@@ -63,16 +63,16 @@ export function ExerciseLicenseNotice({
   return (
     <>
       <Link
-        className={cn(`
-          serlo-button-learner-transparent serlo-tooltip-trigger w-[33px] text-[18px] text-base font-normal hover:no-underline
-        `)}
+        className={cn(
+          `serlo-button-learner-transparent serlo-tooltip-trigger w-[33px] text-[18px] text-base font-normal hover:no-underline`
+        )}
         href={licenseHref}
         noExternalIcon
       >
         <>
-          <EditorTooltip
+          <SimpleTooltip
             text={tooltipTitle}
-            hotkeys={tooltipExplanation}
+            subtext={tooltipExplanation}
             className="right-0 top-10"
           />
           <span className="relative -ml-[1px] inline-block h-5 w-5 align-sub text-xl">

diff --git a/apps/web/src/components/simple-tooltip.tsx b/apps/web/src/components/simple-tooltip.tsx
@@ -0,0 +1,34 @@
+import { cn } from '@/helper/cn'
+
+/**
+ * Simple tooltop. Uses code from EditorTooltip
+ * needs to be wrapped in an element with class "serlo-tooltip-trigger"
+ * ⚠️ Warning: Currently only works if editor css is loaded
+ */
+export function SimpleTooltip({
+  text,
+  subtext,
+  className,
+}: {
+  text?: string
+  subtext?: string
+  className?: string
+}) {
+  if (!text && !subtext) return null
+
+  return (
+    <span
+      className={cn(
+        'serlo-tooltip sr-only pointer-events-none bottom-full block cursor-default opacity-0 transition-opacity',
+        className
+      )}
+    >
+      <span className="block w-80 max-w-fit rounded bg-almost-black px-2 py-1.5 text-center text-sm font-bold text-white">
+        {text}
+        {subtext ? (
+          <span className="block text-gray-300">{subtext}</span>
+        ) : null}
+      </span>
+    </span>
+  )
+}
diff --git a/apps/web/src/serlo-editor-integration/components/external-revision-loader.tsx b/apps/web/src/serlo-editor-integration/components/external-revision-loader.tsx
@@ -1,4 +1,3 @@
-import { EditorTooltip } from '@editor/editor-ui/editor-tooltip'
 import { useEditStrings } from '@editor/i18n/edit-strings-provider'
 import { SerloAddButton } from '@editor/plugin/helpers/serlo-editor-button'
 import { runReplaceDocumentSaga, useAppDispatch } from '@editor/store'
@@ -13,6 +12,7 @@ import { endpoint } from '@/api/endpoint'
 import { UuidUrlInput } from '@/components/author/uuid-url-input'
 import { FaIcon } from '@/components/fa-icon'
 import { ModalWithCloseButton } from '@/components/modal-with-close-button'
+import { SimpleTooltip } from '@/components/simple-tooltip'
 import { useInstanceData } from '@/contexts/instance-context'
 import { UuidType } from '@/data-types'
 import type {
@@ -79,7 +79,7 @@ export function ExternalRevisionLoader<T>({
     <div className="-mb-8 mr-6 mt-4 flex justify-end">
       <span onClick={() => setShowRevisions(true)}>
         <button className="serlo-button-edit-secondary serlo-tooltip-trigger">
-          <EditorTooltip
+          <SimpleTooltip
             text={editorStrings.edtrIo.importOther}
             className="-left-40"
           />