Create TooltipPopup.jsx

rohberg · Dec 20, 2024 · f803274 · f803274
1 parent db84c5d
commit f803274
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/packages/volto-slate-glossary/src/components/TooltipPopup.jsx b/packages/volto-slate-glossary/src/components/TooltipPopup.jsx
@@ -0,0 +1,25 @@
+import { Popup } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+
+const TooltipPopup = ({ term, definition, idx = 0 }) => {
+  const mentionTermInTooltip = config.settings.glossary.mentionTermInTooltip;
+  return (
+    <Popup
+      wide
+      position="bottom left"
+      trigger={<span className="glossarytooltip">{term}</span>}
+      className="tooltip"
+      key={idx}
+    >
+      {mentionTermInTooltip ? <Popup.Header>{term}</Popup.Header> : null}
+      <Popup.Content>
+        <div
+          className="tooltip_content"
+          dangerouslySetInnerHTML={{ __html: definition }}
+        />
+      </Popup.Content>
+    </Popup>
+  );
+};
+
+export default TooltipPopup;