Switch tgui tooltips to popper.js (tgstation#57992)

* Preliminary popper support * Switch tooltips to popper.js * Documentation, change DEFAULT_PLACEMENT
SS13-Source-Archive · Mar 27, 2021 · 206c821 · 206c821
1 parent a7cbc00
commit 206c821
Show file tree

Hide file tree

Showing 25 changed files with 258 additions and 281 deletions.
diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md
@@ -1102,7 +1102,7 @@ Usage:
 
 **Props:**
 
-- `position: string` - Tooltip position.
+- `position: string` - Tooltip position. Valid positions are "bottom", "top", "left", and "right". You can affix "-start" and "-end" to achieve something like top left or top right respectively. Default to "top".
 - `content: string` - Content of the tooltip. Must be a plain string.
 Fragments or other elements are **not** supported.
 

diff --git a/tgui/packages/tgui-panel/Panel.js b/tgui/packages/tgui-panel/Panel.js
@@ -50,7 +50,7 @@ export const Panel = (props, context) => {
                   selected={audio.visible}
                   icon="music"
                   tooltip="Music player"
-                  tooltipPosition="bottom-left"
+                  tooltipPosition="bottom-start"
                   onClick={() => audio.toggle()} />
               </Stack.Item>
               <Stack.Item>
@@ -60,7 +60,7 @@ export const Panel = (props, context) => {
                   tooltip={settings.visible
                     ? 'Close settings'
                     : 'Open settings'}
-                  tooltipPosition="bottom-left"
+                  tooltipPosition="bottom-start"
                   onClick={() => settings.toggle()} />
               </Stack.Item>
             </Stack>

diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js
@@ -28,7 +28,6 @@ export const Button = props => {
     selected,
     tooltip,
     tooltipPosition,
-    tooltipOverrideLong,
     ellipsis,
     compact,
     circular,
@@ -49,7 +48,7 @@ export const Button = props => {
   }
   // IE8: Use a lowercase "onclick" because synthetic events are fucked.
   // IE8: Use an "unselectable" prop because "user-select" doesn't work.
-  return (
+  let buttonContent = (
     <Box
       className={classes([
         'Button',
@@ -106,14 +105,18 @@ export const Button = props => {
           rotation={iconRotation}
           spin={iconSpin} />
       )}
-      {tooltip && (
-        <Tooltip
-          content={tooltip}
-          overrideLong={tooltipOverrideLong}
-          position={tooltipPosition} />
-      )}
     </Box>
   );
+
+  if (tooltip) {
+    buttonContent = (
+      <Tooltip content={tooltip} position={tooltipPosition}>
+        {buttonContent}
+      </Tooltip>
+    );
+  }
+
+  return buttonContent;
 };
 
 Button.defaultHooks = pureComponentHooks;
@@ -234,14 +237,13 @@ export class ButtonInput extends Component {
       iconSpin,
       tooltip,
       tooltipPosition,
-      tooltipOverrideLong,
       color = 'default',
       placeholder,
       maxLength,
       ...rest
     } = this.props;
 
-    return (
+    let buttonContent = (
       <Box
         className={classes([
           'Button',
@@ -284,12 +286,21 @@ export class ButtonInput extends Component {
         {tooltip && (
           <Tooltip
             content={tooltip}
-            overrideLong={tooltipOverrideLong}
             position={tooltipPosition}
           />
         )}
       </Box>
     );
+
+    if (tooltip) {
+      buttonContent = (
+        <Tooltip content={tooltip} position={tooltipPosition}>
+          {buttonContent}
+        </Tooltip>
+      );
+    }
+
+    return buttonContent;
   }
 }
 

diff --git a/tgui/packages/tgui/components/Tooltip.js b/tgui/packages/tgui/components/Tooltip.js
diff --git a/tgui/packages/tgui/components/Tooltip.tsx b/tgui/packages/tgui/components/Tooltip.tsx
@@ -0,0 +1,84 @@
+import { createPopper, Placement } from '@popperjs/core';
+import { Component, createPortal, createRef, InfernoNode } from 'inferno';
+
+const DEFAULT_PLACEMENT = "top";
+
+type TooltipProps = {
+  children?: InfernoNode;
+  content: string;
+  position?: Placement;
+};
+
+type TooltipState = {
+  hovered: boolean;
+};
+
+export class Tooltip extends Component<TooltipProps, TooltipState> {
+  containerRef = createRef<HTMLSpanElement>();
+  tooltipRef = createRef<HTMLDivElement>();
+  portalNode = document.createElement("div");
+
+  constructor() {
+    super();
+
+    this.onMouseEnter = this.onMouseEnter.bind(this);
+    this.onMouseLeave = this.onMouseLeave.bind(this);
+
+    this.state = {
+      hovered: false,
+    };
+  }
+
+  componentDidMount() {
+    document.body.appendChild(this.portalNode);
+
+    createPopper(this.containerRef.current, this.tooltipRef.current, {
+      placement: this.props.position || DEFAULT_PLACEMENT,
+    });
+  }
+
+  componentWillUnmount() {
+    document.body.removeChild(this.portalNode);
+    this.portalNode = null;
+  }
+
+  onMouseEnter() {
+    this.setState({
+      hovered: true,
+    });
+  }
+
+  onMouseLeave() {
+    this.setState({
+      hovered: false,
+    });
+  }
+
+  render() {
+    const {
+      children,
+      content,
+    }: TooltipProps = this.props;
+
+    return (
+      <>
+        <span
+          ref={this.containerRef}
+          onmouseenter={this.onMouseEnter}
+          onmouseleave={this.onMouseLeave}
+        >
+          { children }
+        </span>
+
+        {createPortal(
+          <div class="Tooltip" ref={this.tooltipRef} style={{
+            opacity: this.state.hovered ? 1 : 0,
+          }}>
+            {content}
+          </div>,
+          this.portalNode,
+        )}
+      </>
+    );
+  }
+}
diff --git a/tgui/packages/tgui/interfaces/BluespaceSender.js b/tgui/packages/tgui/interfaces/BluespaceSender.js
@@ -36,7 +36,7 @@ export const BluespaceSender = (props, context) => {
                 mr={0.5}
                 color="transparent"
                 icon="info"
-                tooltipPosition="bottom-left"
+                tooltipPosition="bottom-start"
                 tooltip={multiline`
                 Any gas you pipe into here will be added to the Bluespace
                 Network! That means any connected Bluespace Vendor (multitool)
@@ -59,13 +59,13 @@ export const BluespaceSender = (props, context) => {
                 icon={data.on ? 'power-off' : 'times'}
                 content={data.on ? 'On' : 'Off'}
                 selected={data.on}
-                tooltipPosition="bottom-left"
+                tooltipPosition="bottom-start"
                 tooltip="Will only take in gases while on."
                 onClick={() => act('power')} />
               <Button
                 ml={0.5}
                 content="Retrieve gases"
-                tooltipPosition="bottom-left"
+                tooltipPosition="bottom-start"
                 tooltip="Will transfer any gases inside to the pipe."
                 onClick={() => act('retrieve')} />
             </>

diff --git a/tgui/packages/tgui/interfaces/BluespaceVendor.js b/tgui/packages/tgui/interfaces/BluespaceVendor.js
@@ -87,7 +87,7 @@ export const BluespaceVendor = (props, context) => {
                 <Button
                   color="transparent"
                   icon="info"
-                  tooltipPosition="bottom-left"
+                  tooltipPosition="bottom-start"
                   tooltip={multiline`
                   Quick guide for machine use: prepare a tank to create a
                   new one in the machine, pick how much you want it filled,

diff --git a/tgui/packages/tgui/interfaces/Canister.js b/tgui/packages/tgui/interfaces/Canister.js
@@ -126,17 +126,19 @@ export const Canister = (props, context) => {
                 <LabeledControls.Item
                   mr={1}
                   label="Port">
-                  <Box position="relative">
-                    <Icon
-                      size={1.25}
-                      name={portConnected ? 'plug' : 'times'}
-                      color={portConnected ? 'good' : 'bad'} />
-                    <Tooltip
-                      content={portConnected
-                        ? 'Connected'
-                        : 'Disconnected'}
-                      position="top" />
-                  </Box>
+                  <Tooltip
+                    content={portConnected
+                      ? 'Connected'
+                      : 'Disconnected'}
+                    position="top"
+                  >
+                    <Box position="relative">
+                      <Icon
+                        size={1.25}
+                        name={portConnected ? 'plug' : 'times'}
+                        color={portConnected ? 'good' : 'bad'} />
+                    </Box>
+                  </Tooltip>
                 </LabeledControls.Item>
               </LabeledControls>
             </Section>