Fix tooltips rendered in popped out editor windows (#9150)

newIDE/app/src/AiGeneration/AiRequestChat/ConceptLink.js

@@ -15,6 +15,7 @@ import { mapFor } from '../../Utils/MapFor';
 import classes from './ChatMarkdownText.module.css';
 import classNames from 'classnames';
 import Tooltip from '@material-ui/core/Tooltip';
+import PortalContainerContext from '../../UI/PortalContainerContext';
 import { MarkdownText } from '../../UI/MarkdownText';
 import Text from '../../UI/Text';
 
@@ -149,6 +150,7 @@ export const ConceptLink = ({
   conceptMetadata,
   forceNoLink,
 }: ConceptLinkProps): null | React.Node => {
+  const portalContainer = React.useContext(PortalContainerContext);
   if (!conceptMetadata) return null;
 
   const helpLink = forceNoLink ? '' : getHelpLink(conceptMetadata.helpPath);
@@ -178,6 +180,8 @@ export const ConceptLink = ({
       ]}
       placement="bottom"
       PopperProps={{
+        // Passing PopperProps replaces the theme default container (see FullThemeProvider).
+        container: portalContainer,
         modifiers: {
           offset: {
             enabled: true,

newIDE/app/src/CompactPropertiesEditor/CompactPropertiesEditorRowField.js

@@ -6,6 +6,7 @@ import { LineStackLayout } from '../UI/Layout';
 import Text from '../UI/Text';
 import { MarkdownText } from '../UI/MarkdownText';
 import { tooltipEnterDelay } from '../UI/Tooltip';
+import PortalContainerContext from '../UI/PortalContainerContext';
 
 const styles = {
   leftColumn: { flex: 2, minWidth: 0, maxWidth: 150 },
@@ -26,6 +27,7 @@ type Props = {|
 |};
 
 const CompactPropertiesEditorRowField = (props: Props): React.Node => {
+  const portalContainer = React.useContext(PortalContainerContext);
   const title = !props.markdownDescription
     ? props.label
     : [
@@ -47,6 +49,8 @@ const CompactPropertiesEditorRowField = (props: Props): React.Node => {
           enterDelay={tooltipEnterDelay}
           placement="bottom"
           PopperProps={{
+            // Passing PopperProps replaces the theme default container (see FullThemeProvider).
+            container: portalContainer,
             modifiers: {
               offset: {
                 enabled: true,

newIDE/app/src/UI/CompactSelectField/index.js

@@ -5,6 +5,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import classNames from 'classnames';
 import classes from './CompactSelectField.module.css';
 import { tooltipEnterDelay } from '../Tooltip';
+import PortalContainerContext from '../PortalContainerContext';
 type Props = {|
   onChange: string => void,
   value: string,
@@ -32,6 +33,7 @@ const CompactSelectField = ({
   rounded,
   onFocus,
 }: Props): React.MixedElement => {
+  const portalContainer = React.useContext(PortalContainerContext);
   return (
     <div
       className={classNames({
@@ -47,6 +49,8 @@ const CompactSelectField = ({
           enterDelay={tooltipEnterDelay}
           placement="bottom"
           PopperProps={{
+            // Passing PopperProps replaces the theme default container (see FullThemeProvider).
+            container: portalContainer,
             modifiers: {
               offset: {
                 enabled: true,

newIDE/app/src/UI/CompactTextAreaField/index.js

@@ -9,6 +9,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Text from '../../UI/Text';
 import { MarkdownText } from '../../UI/MarkdownText';
 import { tooltipEnterDelay } from '../../UI/Tooltip';
+import PortalContainerContext from '../PortalContainerContext';
 import { type MessageDescriptor } from '../../Utils/i18n/MessageDescriptor.flow';
 import { shouldSubmit } from '../KeyboardShortcuts/InteractionKeys';
 
@@ -54,6 +55,7 @@ export const CompactTextAreaField = ({
   labelColor,
   onFocus,
 }: CompactTextAreaFieldProps): React.Node => {
+  const portalContainer = React.useContext(PortalContainerContext);
   const idToUse = React.useRef<string>(id || makeTimestampedId());
 
   const title = !markdownDescription
@@ -80,6 +82,8 @@ export const CompactTextAreaField = ({
               enterDelay={tooltipEnterDelay}
               placement="bottom"
               PopperProps={{
+                // Passing PopperProps replaces the theme default container (see FullThemeProvider).
+                container: portalContainer,
                 modifiers: {
                   offset: {
                     enabled: true,

newIDE/app/src/UI/CompactTextField/index.js

@@ -5,6 +5,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import classNames from 'classnames';
 import classes from './CompactTextField.module.css';
 import { tooltipEnterDelay } from '../Tooltip';
+import PortalContainerContext from '../PortalContainerContext';
 import useClickDragAsControl from './UseClickDragAsControl';
 import { makeTimestampedId } from '../../Utils/TimestampedId';
 import { toFixedWithoutTrailingZeros } from '../../Utils/Mathematics';
@@ -84,6 +85,7 @@ const CompactTextField: React.ComponentType<{
     },
     ref
   ) => {
+    const portalContainer = React.useContext(PortalContainerContext);
     const idToUse = React.useRef<string>(id || makeTimestampedId());
     const inputRef = React.useRef<?HTMLInputElement>(null);
     const controlProps = useClickDragAsControl({
@@ -173,6 +175,8 @@ const CompactTextField: React.ComponentType<{
             enterDelay={tooltipEnterDelay}
             placement="bottom"
             PopperProps={{
+              // Passing PopperProps replaces the theme default container (see FullThemeProvider).
+              container: portalContainer,
               modifiers: {
                 offset: {
                   enabled: true,

newIDE/app/src/UI/CompactToggleField/index.js

@@ -4,6 +4,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Text from '../../UI/Text';
 import { MarkdownText } from '../../UI/MarkdownText';
 import { tooltipEnterDelay } from '../../UI/Tooltip';
+import PortalContainerContext from '../PortalContainerContext';
 import classes from './CompactToggleField.module.css';
 import classNames from 'classnames';
 
@@ -33,6 +34,7 @@ type Props = {|
 |};
 
 export const CompactToggleField = (props: Props): React.MixedElement => {
+  const portalContainer = React.useContext(PortalContainerContext);
   const title = props.hideTooltip
     ? null
     : !props.markdownDescription
@@ -103,6 +105,8 @@ export const CompactToggleField = (props: Props): React.MixedElement => {
           enterDelay={tooltipEnterDelay}
           placement="bottom"
           PopperProps={{
+            // Passing PopperProps replaces the theme default container (see FullThemeProvider).
+            container: portalContainer,
             modifiers: {
               offset: {
                 enabled: true,

newIDE/app/src/UI/Theme/FullThemeProvider.js

@@ -53,6 +53,7 @@ const getPortalContainerThemeProps = (portalContainer: ?HTMLElement) => {
     MuiMenu: { container: portalContainer },
     MuiDrawer: { container: portalContainer },
     MuiTooltip: {
+      // Replaced by any Tooltip passing its own PopperProps: those must also set the container.
       PopperProps: { container: portalContainer },
     },
   };