add OverflowTooltip component (thanks LavaSquid)

src/core/modules/components/OverflowTooltip.jsx

@@ -0,0 +1,32 @@
+/**
+ * Wraps a text or element in a div, which shows a tooltip when the text is truncated
+ * due to not enough horizontal space. Thanks to 𝕷𝖆𝖛𝖆𝕾𝖖𝖚𝖎𝖉 🦑#9980 [227533573177999361] for this.
+ * @component
+ */
+
+import React, { memo, useRef } from 'react';
+import { joinClassNames } from '@vizality/util/dom';
+
+import { AsyncComponent } from '.';
+
+const Tooltip = AsyncComponent.fromDisplayName('Tooltip');
+
+export default memo(props => {
+  const overflowDiv = useRef(null);
+  return (
+    <Tooltip {...props}>
+      {propz => {
+        const ogMouseEnter = propz.onMouseEnter;
+        propz.onMouseEnter = () => {
+          const ref = overflowDiv.current;
+          ref?.scrollWidth > ref?.offsetWidth && ogMouseEnter?.();
+        };
+        return (
+          <div ref={overflowDiv} className={joinClassNames('vz-overflow-tooltip', props.className)} {...propz}>
+            {props.children}
+          </div>
+        );
+      }}
+    </Tooltip>
+  );
+});

src/core/modules/components/index.js

@@ -63,6 +63,7 @@ export { default as ComponentPreview } from './ComponentPreview';
 export { default as AsyncComponent } from './AsyncComponent';
 export { default as DeferredRender } from './DeferredRender';
 export { default as ErrorBoundary } from './ErrorBoundary';
+export { default as OverflowTooltip } from './OverflowTooltip';
 export { default as StickyWrapper } from './StickyWrapper';
 export { default as ColorPicker } from './ColorPicker';
 export { default as PopupWindow } from './PopupWindow';

src/core/styles/components/_index.scss

@@ -1,5 +1,6 @@
 @forward 'editor';
 @forward 'component-preview';
+@forward 'overflow-tooltip';
 @forward 'error-boundary';
 @forward 'icon';
 @forward 'markdown';

src/core/styles/components/_overflow-tooltip.scss

@@ -0,0 +1,5 @@
+@use '@vizality' as vz;
+
+.vz-overflow-tooltip {
+  @include vz.ellipsis(100%, inline-block);
+}