Revert "Switch tgui tooltips to popper.js" (#58078)

* Revert "Switch tgui tooltips to popper.js (#57992)" This reverts commit 206c8215de. * Revert "Fix Tooltip documentation (#58013)" This reverts commit e692b05a99.
2026-08-23 21:18:37 +01:00 · 2021-03-31 05:04:43 -07:00
parent ed0371cc88
commit 9bb07456cc
25 changed files with 289 additions and 267 deletions
@@ -1083,7 +1083,8 @@ Intended for usage on interfaces where tab color has relevance.

 ### `Tooltip`

-A boxy tooltip that displays when hovering over its children.
+A boxy tooltip from tgui 1. It is very hacky in its current state, and
+requires setting `position: relative` on the container.

 Please note, that [Button](#button) component has a `tooltip` prop, and
 it is recommended to use that prop instead.
@@ -1091,19 +1092,17 @@ it is recommended to use that prop instead.
 Usage:

 ```jsx
-<Tooltip
-  position="bottom"
-  content="Box tooltip"
->
-  <Box>
-    Sample text.
-  </Box>
-</Tooltip>
+<Box position="relative">
+  Sample text.
+  <Tooltip
+    position="bottom"
+    content="Box tooltip" />
+</Box>
 ```

 **Props:**

- `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".
+- `position: string` - Tooltip position.
 - `content: string` - Content of the tooltip. Must be a plain string.
 Fragments or other elements are **not** supported.

@@ -50,7 +50,7 @@ export const Panel = (props, context) => {
                  selected={audio.visible}
                  icon="music"
                  tooltip="Music player"
-                  tooltipPosition="bottom-start"
+                  tooltipPosition="bottom-left"
                  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-start"
+                  tooltipPosition="bottom-left"
                  onClick={() => settings.toggle()} />
              </Stack.Item>
            </Stack>
@@ -28,6 +28,7 @@ export const Button = props => {
    selected,
    tooltip,
    tooltipPosition,
+    tooltipOverrideLong,
    ellipsis,
    compact,
    circular,
@@ -48,7 +49,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.
-  let buttonContent = (
+  return (
    <Box
      className={classes([
        'Button',
@@ -105,18 +106,14 @@ 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;
@@ -237,13 +234,14 @@ export class ButtonInput extends Component {
      iconSpin,
      tooltip,
      tooltipPosition,
+      tooltipOverrideLong,
      color = 'default',
      placeholder,
      maxLength,
      ...rest
    } = this.props;

-    let buttonContent = (
+    return (
      <Box
        className={classes([
          'Button',
@@ -286,21 +284,12 @@ 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;
  }
 }

@@ -0,0 +1,28 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from 'common/react';
+
+export const Tooltip = props => {
+  const {
+    content,
+    overrideLong = false,
+    position = 'bottom',
+  } = props;
+  // Empirically calculated length of the string,
+  // at which tooltip text starts to overflow.
+  const long = typeof content === 'string' 
+  && (content.length > 35 && !overrideLong);
+  return (
+    <div
+      className={classes([
+        'Tooltip',
+        long && 'Tooltip--long',
+        position && 'Tooltip--' + position,
+      ])}
+      data-tooltip={content} />
+  );
+};
@@ -1,84 +0,0 @@
-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,
-        )}
-      </>
-    );
-  }
-}
@@ -36,7 +36,7 @@ export const BluespaceSender = (props, context) => {
                mr={0.5}
                color="transparent"
                icon="info"
-                tooltipPosition="bottom-start"
+                tooltipPosition="bottom-left"
                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-start"
+                tooltipPosition="bottom-left"
                tooltip="Will only take in gases while on."
                onClick={() => act('power')} />
              <Button
                ml={0.5}
                content="Retrieve gases"
-                tooltipPosition="bottom-start"
+                tooltipPosition="bottom-left"
                tooltip="Will transfer any gases inside to the pipe."
                onClick={() => act('retrieve')} />
            </>
@@ -87,7 +87,7 @@ export const BluespaceVendor = (props, context) => {
                <Button
                  color="transparent"
                  icon="info"
-                  tooltipPosition="bottom-start"
+                  tooltipPosition="bottom-left"
                  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,
@@ -126,19 +126,17 @@ export const Canister = (props, context) => {
                <LabeledControls.Item
                  mr={1}
                  label="Port">
-                  <Tooltip
-                    content={portConnected
-                      ? 'Connected'
-                      : 'Disconnected'}
-                    position="top"
-                  >
-                    <Box position="relative">
-                      <Icon
-                        size={1.25}
-                        name={portConnected ? 'plug' : 'times'}
-                        color={portConnected ? 'good' : 'bad'} />
-                    </Box>
-                  </Tooltip>
+                  <Box position="relative">
+                    <Icon
+                      size={1.25}
+                      name={portConnected ? 'plug' : 'times'}
+                      color={portConnected ? 'good' : 'bad'} />
+                    <Tooltip
+                      content={portConnected
+                        ? 'Connected'
+                        : 'Disconnected'}
+                      position="top" />
+                  </Box>
                </LabeledControls.Item>
              </LabeledControls>
            </Section>
@@ -572,6 +572,7 @@ const PodStatusPage = (props, context) => {
                            : effect.title)
                          : effect.title}
                        tooltipPosition={list.tooltipPosition}
+                        tooltipOverrideLong
                        icon={effect.icon}
                        content={effect.content}
                        selected={effect.soloSelected
@@ -608,7 +609,7 @@ const PodStatusPage = (props, context) => {
                    color="transparent"
                    icon="list-alt"
                    tooltip="Game Panel"
-                    tooltipPosition="top-start"
+                    tooltipPosition="top-left"
                    onClick={() => act('gamePanel')} />
                  <Button
                    inline
@@ -616,7 +617,7 @@ const PodStatusPage = (props, context) => {
                    color="transparent"
                    icon="hammer"
                    tooltip="Build Mode"
-                    tooltipPosition="top-start"
+                    tooltipPosition="top-left"
                    onClick={() => act('buildMode')} />
                  {compact && (
                    <Button
@@ -625,7 +626,7 @@ const PodStatusPage = (props, context) => {
                      color="transparent"
                      icon="expand"
                      tooltip="Maximize"
-                      tooltipPosition="top-start"
+                      tooltipPosition="top-left"
                      onClick={() => {
                        toggleCompact();
                        act('refreshView');
@@ -637,7 +638,7 @@ const PodStatusPage = (props, context) => {
                      color="transparent"
                      icon="compress"
                      tooltip="Compact mode"
-                      tooltipPosition="top-start"
+                      tooltipPosition="top-left"
                      onClick={() => toggleCompact()} />
                  )}
                </Box>
@@ -670,7 +671,8 @@ const ReverseMenu = (props, context) => {
            Afer landing, returns to
            dropoff turf (or bay
            if none specified).`}
-          tooltipPosition="top-start"
+          tooltipOverrideLong
+          tooltipPosition="top-left"
          onClick={() => {
            act('effectReverse');
            if (tabPageIndex === 2) {
@@ -689,7 +691,8 @@ const ReverseMenu = (props, context) => {
              tooltip={multiline`
                Where reverse pods
                go after landing`}
-              tooltipPosition="bottom-end"
+              tooltipOverrideLong
+              tooltipPosition="bottom-right"
              onClick={() => act('pickDropoffTurf')} />
            <Button
              inline
@@ -700,6 +703,7 @@ const ReverseMenu = (props, context) => {
                location. Reverse pods will
                instead dropoff at the
                selected bay.`}
+              tooltipOverrideLong
              tooltipPosition="bottom"
              onClick={() => {
                act('clearDropoffTurf');
@@ -723,6 +727,7 @@ const ReverseMenu = (props, context) => {
                    : data.reverse_option_list[option.title]
                }
                tooltip={option.title}
+                tooltipOverrideLong
                onClick={() => act('reverseOption', {
                  reverseOption: option.key
                    ? option.key
@@ -824,6 +829,7 @@ class PresetsPage extends Component {
              content=""
              icon="download"
              tooltip="Saves preset"
+              tooltipOverrideLong
              tooltipPosition="bottom"
              onClick={() => this.saveDataToPreset(presetIndex, data)} />
            <Button
@@ -840,7 +846,7 @@ class PresetsPage extends Component {
              color="transparent"
              icon="trash"
              tooltip="Deletes the selected preset"
-              tooltipPosition="bottom-start"
+              tooltipPosition="bottom-left"
              onClick={() => this.deletePreset(presetIndex)} />
          </>
        )}>
@@ -921,6 +927,7 @@ const LaunchPage = (props, context) => {
      tooltip={multiline`
        You should know what the
        Codex Astartes says about this`}
+      tooltipOverrideLong
      selected={data.giveLauncher}
      tooltipPosition="top"
      content={(
@@ -952,7 +959,7 @@ const StylePage = (props, context) => {
          tooltip={multiline`
            Edit pod's
            name/desc.`}
-          tooltipPosition="bottom-start"
+          tooltipPosition="bottom-left"
          onClick={() => act('effectName')} />
      )}>
      {STYLES.map((page, i) => (
@@ -962,8 +969,8 @@ const StylePage = (props, context) => {
          height="45px"
          tooltipPosition={
            i >= STYLES.length-2
-              ? (i%2===1 ? "top-start" : "top-end")
-              : (i%2===1 ? "bottom-start" : "bottom-end")
+              ? (i%2===1 ? "top-left" : "top-right")
+              : (i%2===1 ? "bottom-left" : "bottom-right")
          }
          tooltip={page.title}
          style={{
@@ -999,7 +1006,8 @@ const Bays = (props, context) => {
            tooltip={multiline`
              Clears everything
              from the selected bay`}
-            tooltipPosition="bottom-end"
+            tooltipOverrideLong
+            tooltipPosition="bottom-right"
            onClick={() => act('clearBay')} />
          <Button
            icon="question"
@@ -1012,14 +1020,15 @@ const Bays = (props, context) => {
              in these areas according
              to the "Load from Bay"
              options at the top left.`}
-            tooltipPosition="bottom-end" />
+            tooltipOverrideLong
+            tooltipPosition="bottom-right" />
        </>
      )}>
      {BAYS.map((bay, i) => (
        <Button
          key={i}
          content={bay.title}
-          tooltipPosition="bottom-end"
+          tooltipPosition={"bottom-right"}
          selected={data.bayNumber === ""+(i+1)}
          onClick={() => act('switchBay', { bayNumber: (""+(i+1)) })} />
      ))}
@@ -1041,7 +1050,8 @@ const Timing = (props, context) => {
            tooltip={multiline`
            Reset all pod
            timings/delays`}
-            tooltipPosition="bottom-end"
+            tooltipOverrideLong
+            tooltipPosition="bottom-right"
            onClick={() => act('resetTiming')} />
          <Button
            icon={data.custom_rev_delay === 1 ? "toggle-on" : "toggle-off"}
@@ -1053,7 +1063,8 @@ const Timing = (props, context) => {
            Note: Top set is
            normal delays, bottom set
            is reversing pod's delays`}
-            tooltipPosition="bottom-end"
+            tooltipOverrideLong
+            tooltipPosition="bottom-right"
            onClick={() => act('toggleRevDelays')} />
        </>
      )}>
@@ -1121,6 +1132,7 @@ const Sounds = (props, context) => {
          selected={data.soundVolume !== data.defaultSoundVolume}
          tooltip={multiline`
            Sound Volume:` + data.soundVolume}
+          tooltipOverrideLong
          onClick={() => act('soundVolume')} />
      )}>
      {SOUNDS.map((sound, i) => (
@@ -1128,7 +1140,8 @@ const Sounds = (props, context) => {
          key={i}
          content={sound.title}
          tooltip={sound.tooltip}
-          tooltipPosition="top-start"
+          tooltipPosition="top-right"
+          tooltipOverrideLong
          selected={data[sound.act]}
          onClick={() => act(sound.act)} />
      ))}
@@ -48,12 +48,12 @@ export const ChemDispenser = (props, context) => {
                disabled={!data.isBeakerLoaded}
                content={"Reaction search"}
                tooltip={data.isBeakerLoaded ? "Look up recipes and reagents!" : "Please insert a beaker!"}
-                tooltipPosition="bottom-start"
+                tooltipPosition="bottom-left"
                onClick={() => act('reaction_lookup')} />
              <Button
                icon="cog"
                tooltip="Color code the reagents by pH"
-                tooltipPosition="bottom-start"
+                tooltipPosition="bottom-left"
                selected={hasCol}
                onClick={() => setHasCol(!hasCol)} />
            </>
@@ -349,7 +349,7 @@ const PageMain = (props, context) => {
                "You do not have permission to recall the emergency shuttle."
              )
            )}
-            tooltipPosition="bottom-end"
+            tooltipPosition="bottom-right"
            onClick={() => act("recallShuttle")}
          />
        ) || (
@@ -362,7 +362,7 @@ const PageMain = (props, context) => {
                ? shuttleCanEvacOrFailReason
                : undefined
            }
-            tooltipPosition="bottom-end"
+            tooltipPosition="bottom-right"
            onClick={() => setCallingShuttle(true)}
          />
        )}
@@ -102,15 +102,13 @@ const CfStep2 = (props, context) => {
          <Table.Cell
            bold
            position="relative">
+            Battery:
            <Tooltip
              content={multiline`
                Allows your device to operate without external utility power
                source. Advanced batteries increase battery life.
              `}
-              position="right"
-            >
-              Battery:
-            </Tooltip>
+              position="right" />
          </Table.Cell>
          <Table.Cell>
            <Button
@@ -138,19 +136,16 @@ const CfStep2 = (props, context) => {
          </Table.Cell>
        </Table.Row>
        <Table.Row>
-
          <Table.Cell
            bold
            position="relative">
+            Hard Drive:
            <Tooltip
              content={multiline`
                Stores file on your device. Advanced drives can store more
                files, but use more power, shortening battery life.
              `}
-              position="right"
-            >
-              Hard Drive:
-            </Tooltip>
+              position="right" />
          </Table.Cell>
          <Table.Cell>
            <Button
@@ -179,6 +174,7 @@ const CfStep2 = (props, context) => {
        </Table.Row>
        <Table.Row>
          <Table.Cell bold position="relative">
+            Network Card:
            <Tooltip
              content={multiline`
                Allows your device to wirelessly connect to stationwide NTNet
@@ -186,10 +182,7 @@ const CfStep2 = (props, context) => {
                advanced cards can operate anywhere near the station, which
                includes asteroid outposts
              `}
-              position="right"
-            >
-              Network Card:
-            </Tooltip>
+              position="right" />
          </Table.Cell>
          <Table.Cell>
            <Button
@@ -218,6 +211,7 @@ const CfStep2 = (props, context) => {
        </Table.Row>
        <Table.Row>
          <Table.Cell bold position="relative">
+            Nano Printer:
            <Tooltip
              content={multiline`
                A device that allows for various paperwork manipulations,
@@ -225,10 +219,7 @@ const CfStep2 = (props, context) => {
                This device was certified EcoFriendlyPlus and is capable of
                recycling existing paper for printing purposes.
              `}
-              position="right"
-            >
-              Nano Printer:
-            </Tooltip>
+              position="right" />
          </Table.Cell>
          <Table.Cell>
            <Button
@@ -249,6 +240,7 @@ const CfStep2 = (props, context) => {
        </Table.Row>
        <Table.Row>
          <Table.Cell bold position="relative">
+            Secondary Card Reader:
            <Tooltip
              content={multiline`
                Adds a secondary RFID card reader, for manipulating or
@@ -257,10 +249,7 @@ const CfStep2 = (props, context) => {
                allow the device to read your identification, but one
                is included in the base price.
              `}
-              position="right"
-            >
-              Secondary Card Reader:
-            </Tooltip>
+              position="right" />
          </Table.Cell>
          <Table.Cell>
            <Button
@@ -283,6 +272,7 @@ const CfStep2 = (props, context) => {
          <>
            <Table.Row>
              <Table.Cell bold position="relative">
+                Processor Unit:
                <Tooltip
                  content={multiline`
                    A component critical for your device's functionality.
@@ -290,10 +280,7 @@ const CfStep2 = (props, context) => {
                    Advanced CPUs use more power, but allow you to run
                    more programs on background at once.
                  `}
-                  position="right"
-                >
-                  Processor Unit:
-                </Tooltip>
+                  position="right" />
              </Table.Cell>
              <Table.Cell>
                <Button
@@ -314,6 +301,7 @@ const CfStep2 = (props, context) => {
            </Table.Row>
            <Table.Row>
              <Table.Cell bold position="relative">
+                Tesla Relay:
                <Tooltip
                  content={multiline`
                    An advanced wireless power relay that allows your device
@@ -321,10 +309,7 @@ const CfStep2 = (props, context) => {
                    alternative power source. This component is currently
                    unavailable on tablet computers due to size restrictions.
                  `}
-                  position="right"
-                >
-                  Tesla Relay:
-                </Tooltip>
+                  position="right" />
              </Table.Cell>
              <Table.Cell>
                <Button
@@ -130,7 +130,7 @@ export const CyborgBootDebug = (props, context) => {
                <Button
                  icon="info"
                  tooltip={TOOLTIP_LAWSYNC}
-                  tooltipPosition="top-start" />
+                  tooltipPosition="top-left" />
              )}>
              <Button
                icon={!aisync ? "lock" : lawsync ? "unlock" : "lock"}
@@ -209,17 +209,17 @@ export const Experiment = (props, context) => {
            color={!controllable || selectable
              ? "rgba(255, 255, 255, 0.5)"
              : "rgba(0, 0, 0, 0.5)"}>
-            <Tooltip
-              content={performance_hint}
-              position="bottom-start"
-            >
-              <Box className="ExperimentConfigure__TagContainer">
-                {tag}
-                <Icon
-                  name="question-circle"
-                  mx={0.5} />
+            <Box className="ExperimentConfigure__TagContainer">
+              {tag}
+              <Icon
+                name="question-circle"
+                mx={0.5} />
+              <Box className="ExperimentConfigure__PerformanceHint">
+                <Tooltip
+                  content={performance_hint}
+                  position="bottom-left" />
              </Box>
-            </Tooltip>
+            </Box>
          </Flex.Item>
        </Flex>
      </Button>
@@ -104,7 +104,7 @@ const MafiaLobby = (props, context) => {
          {' '}
          <Button
            icon="clipboard-check"
-            tooltipPosition="bottom-start"
+            tooltipPosition="bottom-left"
            tooltip={multiline`
              Signs you up for the next game. If there
              is an ongoing one, you will be signed up
@@ -114,7 +114,7 @@ const MafiaLobby = (props, context) => {
            onClick={() => act('mf_signup')} />
          <Button
            icon="eye"
-            tooltipPosition="bottom-start"
+            tooltipPosition="bottom-left"
            tooltip={multiline`
              Spectates games until you turn it off.
              Automatically enabled when you die in game,
@@ -225,7 +225,7 @@ const MafiaListOfRoles = (props, context) => {
          <Button
            color="transparent"
            icon="address-book"
-            tooltipPosition="bottom-start"
+            tooltipPosition="bottom-left"
            tooltip={multiline`
              The top section is the roles in the game. You can
              press the question mark to get a quick blurb
@@ -234,7 +234,7 @@ const MafiaListOfRoles = (props, context) => {
          <Button
            color="transparent"
            icon="edit"
-            tooltipPosition="bottom-start"
+            tooltipPosition="bottom-left"
            tooltip={multiline`
              The bottom section are your notes. on some roles this
              will just be an empty box, but on others it records the
@@ -79,7 +79,7 @@ const RobotInfo = (props, context) => {
          <Button
            icon="home"
            tooltip="Travel Home."
-            tooltipPosition="bottom-start"
+            tooltipPosition="bottom-left"
            onClick={() => act('home', {
              robot: mule.mule_ref,
            })} />
@@ -150,7 +150,7 @@ export const Orbit = (props, context) => {
                color="transparent"
                tooltip={multiline`Toggle Auto-Observe. When active, you'll
                see the UI / full inventory of whoever you're orbiting. Neat!`}
-                tooltipPosition="bottom-start"
+                tooltipPosition="bottom-left"
                selected={auto_observe}
                icon={auto_observe ? "toggle-on" : "toggle-off"}
                onClick={() => act("toggle_observe")} />
@@ -158,7 +158,7 @@ export const Orbit = (props, context) => {
                inline
                color="transparent"
                tooltip="Refresh"
-                tooltipPosition="bottom-start"
+                tooltipPosition="bottom-left"
                icon="sync-alt"
                onClick={() => act("refresh")} />
            </Flex.Item>
@@ -185,7 +185,7 @@ const CheckoutTab = (props, context) => {
                Sends the ingredients instantly,
                and locks the console longer. Doubles the price!
                `}
-                tooltipPosition="top-start"
+                tooltipPosition="top-left"
                onClick={() => act('express')} />
            </Stack.Item>
          </Stack>
@@ -459,7 +459,7 @@ export const Spellbook = (props, context) => {
                                        <Button
                                          icon="tshirt"
                                          color={entry.clothes_req ? "bad" : "green"}
-                                          tooltipPosition="bottom-start"
+                                          tooltipPosition="bottom-left"
                                          tooltip={entry.clothes_req
                                            ? "Requires wizard garb."
                                            :"Can be cast without wizard garb."} />
@@ -590,7 +590,7 @@ export const Spellbook = (props, context) => {
                                        <Button
                                          icon="tshirt"
                                          color={entry.clothes_req ? "bad" : "green"}
-                                          tooltipPosition="bottom-start"
+                                          tooltipPosition="bottom-left"
                                          tooltip={entry.clothes_req
                                            ? "Requires wizard garb."
                                            :"Can be cast without wizard garb."} />
@@ -128,31 +128,28 @@ export const RecipeLookup = (props, context) => {
      <LabeledList.Item bold label="Purity">
        <LabeledList>
          <LabeledList.Item label="Optimal pH range">
-            <Tooltip
-              content="If your reaction is kept within these bounds then the purity of your product will be 100%">
-              <Box position="relative">
-                {recipe.lowerpH + "-" + recipe.upperpH}
-              </Box>
-            </Tooltip>
+            <Box position="relative">
+              <Tooltip
+                content="If your reaction is kept within these bounds then the purity of your product will be 100%" />
+              {recipe.lowerpH + "-" + recipe.upperpH}
+            </Box>
          </LabeledList.Item>
          {!!recipe.inversePurity && (
            <LabeledList.Item label="Inverse purity">
-              <Tooltip
-                content="If your purity is below this it will 100% convert into the product's associated Inverse reagent on consumption.">
-                <Box position="relative">
-                  {`<${(recipe.inversePurity*100)}%`}
-                </Box>
-              </Tooltip>
+              <Box position="relative">
+                <Tooltip
+                  content="If your purity is below this it will 100% convert into the product's associated Inverse reagent on consumption." />
+                {`<${(recipe.inversePurity*100)}%`}
+              </Box>
            </LabeledList.Item>
          )}
          {!!recipe.minPurity && (
            <LabeledList.Item label="Minimum purity">
-              <Tooltip
-                content="If your purity is below this at any point during the reaction, it will cause negative effects, and if it remains below this value on completion it will convert into the product's associated Failed reagent.">
-                <Box position="relative">
-                  {`<${(recipe.minPurity*100)}%`}
-                </Box>
-              </Tooltip>
+              <Box position="relative">
+                <Tooltip
+                  content="If your purity is below this at any point during the reaction, it will cause negative effects, and if it remains below this value on completion it will convert into the product's associated Failed reagent." />
+                {`<${(recipe.minPurity*100)}%`}
+              </Box>
            </LabeledList.Item>
          )}
        </LabeledList>
@@ -190,11 +187,10 @@ export const RecipeLookup = (props, context) => {
            <Tooltip
              content={recipe.isColdRecipe
                ? "The temperature at which it is underheated, causing negative effects on the reaction."
-                : "The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate."}>
-              {recipe.isColdRecipe
-                ? recipe.explodeTemp + "K"
-                : recipe.tempMin + "K"}
-            </Tooltip>
+                : "The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate."} />
+            {recipe.isColdRecipe
+              ? recipe.explodeTemp + "K"
+              : recipe.tempMin + "K"}
          </Flex.Item>
          {recipe.explosive && (
            <Flex.Item
@@ -203,11 +199,10 @@ export const RecipeLookup = (props, context) => {
              <Tooltip
                content={recipe.isColdRecipe
                  ? "The minimum temperature needed for this reaction to start. Heating it up past this point will increase the reaction rate."
-                  : "The temperature at which it is overheated, causing negative effects on the reaction."}>
-                {recipe.isColdRecipe
-                  ? recipe.tempMin + "K"
-                  : recipe.explodeTemp + "K"}
-              </Tooltip>
+                  : "The temperature at which it is overheated, causing negative effects on the reaction."} />
+              {recipe.isColdRecipe
+                ? recipe.tempMin + "K"
+                : recipe.explodeTemp + "K"}
            </Flex.Item>
          )}
        </Flex>
@@ -217,18 +212,16 @@ export const RecipeLookup = (props, context) => {
          <LabeledList.Item label="Optimal rate">
            <Box position="relative">
              <Tooltip
-                content="The fastest rate the reaction can go, in units per second. This is the plateu region shown in the rate profile above.">
-                {recipe.thermoUpper + "u/s"}
-              </Tooltip>
+                content="The fastest rate the reaction can go, in units per second. This is the plateu region shown in the rate profile above." />
+              {recipe.thermoUpper + "u/s"}
            </Box>
          </LabeledList.Item>
        </LabeledList>
        <Box
          position="relative">
          <Tooltip
-            content="The heat generated by a reaction - exothermic produces heat, endothermic consumes heat.">
-            {recipe.thermics}
-          </Tooltip>
+            content="The heat generated by a reaction - exothermic produces heat, endothermic consumes heat." />
+          {recipe.thermics}
        </Box>
      </LabeledList.Item>
    </LabeledList>
@@ -98,7 +98,7 @@ export const NtosWindow = (props, context) => {
                color="transparent"
                icon="window-close-o"
                tooltip="Close"
-                tooltipPosition="bottom-start"
+                tooltipPosition="bottom-left"
                onClick={() => act('PC_exit')} />
            )}
            {!PC_showexitprogram && (
@@ -110,7 +110,7 @@ export const NtosWindow = (props, context) => {
                color="transparent"
                icon="power-off"
                tooltip="Power off"
-                tooltipPosition="bottom-start"
+                tooltipPosition="bottom-left"
                onClick={() => act('PC_shutdown')} />
            )}
          </div>
@@ -3,7 +3,6 @@
  "name": "tgui",
  "version": "4.3.0",
  "dependencies": {
-    "@popperjs/core": "^2.9.1",
    "common": "workspace:*",
    "dompurify": "^2.2.6",
    "inferno": "^7.4.8",
@@ -17,15 +17,16 @@ const Story = props => {
    'left',
    'right',
    'bottom',
+    'bottom-left',
+    'bottom-right',
  ];
  return (
    <Section>
      <Box>
-        <Tooltip content="Tooltip text.">
-          <Box inline position="relative" mr={1}>
-            Box (hover me).
-          </Box>
-        </Tooltip>
+        <Box inline position="relative" mr={1}>
+          Box (hover me).
+          <Tooltip content="Tooltip text." />
+        </Box>
        <Button
          tooltip="Tooltip text."
          content="Button" />
@@ -4,22 +4,131 @@
 */

@use '../base.scss';
-@use '../functions.scss'as *;
+@use '../functions.scss' as *;

 $color: #ffffff !default;
 $background-color: #000000 !default;
 $border-radius: base.$border-radius !default;

 .Tooltip {
-  white-space: pre;
-  z-index: 2;
-  padding: 0.5em 0.75em;
-  pointer-events: none;
-  text-align: left;
-  transition: all 150ms ease-out;
-  background-color: $background-color;
-  color: $color;
-  box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5);
-  border-radius: $border-radius;
-  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-style: normal;
+  font-weight: normal;
+
+  &::after {
+    position: absolute;
+    display: block;
+    white-space: pre;
+    z-index: 2;
+    padding: 0.5em 0.75em;
+    transform: translateX(-50%);
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    text-align: left;
+    content: attr(data-tooltip);
+    transition: all 150ms ease-out;
+    background-color: $background-color;
+    color: $color;
+    box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5);
+    border-radius: $border-radius;
+  }
+
+  &:hover::after {
+    transition: all 70ms;
+    pointer-events: none;
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.Tooltip--long {
+  &::after {
+    width: base.em(250px);
+    white-space: normal;
+  }
+}
+
+.Tooltip--top::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(0.5em);
+}
+
+.Tooltip--top:hover::after {
+  transform: translateX(-50%) translateY(-0.5em);
+}
+
+.Tooltip--top-left::after {
+  bottom: 100%;
+  right: 50%;
+  transform: translateX(12px) translateY(8px);
+}
+
+.Tooltip--top-left:hover::after {
+  transform: translateX(12px) translateY(-8px);
+}
+
+.Tooltip--top-right::after {
+  top: 0px;
+  right: 0px;
+  transform: translateX(100%) translateY(-50%);
+}
+
+.Tooltip--top-right:hover::after {
+  transform: translateX(100%) translateY(-100%);
+}
+
+.Tooltip--bottom::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-0.5em);
+}
+
+.Tooltip--bottom:hover::after {
+  transform: translateX(-50%) translateY(0.5em);
+}
+
+.Tooltip--bottom-left::after {
+  top: 100%;
+  right: 50%;
+  transform: translateX(12px) translateY(-0.5em);
+}
+
+.Tooltip--bottom-left:hover::after {
+  transform: translateX(12px) translateY(0.5em);
+}
+
+.Tooltip--bottom-right::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-12px) translateY(-0.5em);
+}
+
+.Tooltip--bottom-right:hover::after {
+  transform: translateX(-12px) translateY(0.5em);
+}
+
+.Tooltip--left::after {
+  top: 50%;
+  right: 100%;
+  transform: translateX(0.5em) translateY(-50%);
+}
+
+.Tooltip--left:hover::after {
+  transform: translateX(-0.5em) translateY(-50%);
+}
+
+.Tooltip--right::after {
+  top: 50%;
+  left: 100%;
+  transform: translateX(-0.5em) translateY(-50%);
+}
+
+.Tooltip--right:hover::after {
+  transform: translateX(0.5em) translateY(-50%);
 }
@@ -1537,13 +1537,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@popperjs/core@npm:^2.9.1":
-  version: 2.9.1
-  resolution: "@popperjs/core@npm:2.9.1"
-  checksum: 6739f6344b67c393dd06dee4a8b60dbc22abec502497b5cef091aa859efc35fe1c924e3b21762bef2667b4736a5fe713ad075dcd8429a6671bf30470e8090898
-  languageName: node
-  linkType: hard
-
 "@sinonjs/commons@npm:^1.7.0":
  version: 1.8.2
  resolution: "@sinonjs/commons@npm:1.8.2"
@@ -8234,7 +8227,6 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "tgui@workspace:packages/tgui"
  dependencies:
-    "@popperjs/core": ^2.9.1
    common: "workspace:*"
    dompurify: ^2.2.6
    inferno: ^7.4.8