diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md
index 07aafff5cd3..39b2755316d 100644
--- a/tgui/docs/component-reference.md
+++ b/tgui/docs/component-reference.md
@@ -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
-
-
- Sample text.
-
-
+
+ Sample text.
+
+
```
**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.
diff --git a/tgui/packages/tgui-panel/Panel.js b/tgui/packages/tgui-panel/Panel.js
index d6cc9eb7efc..4930eb33a04 100644
--- 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-start"
+ tooltipPosition="bottom-left"
onClick={() => audio.toggle()} />
@@ -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()} />
diff --git a/tgui/packages/tgui/components/Button.js b/tgui/packages/tgui/components/Button.js
index 750859f95a9..f9e2b8589f8 100644
--- a/tgui/packages/tgui/components/Button.js
+++ b/tgui/packages/tgui/components/Button.js
@@ -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 (
{
rotation={iconRotation}
spin={iconSpin} />
)}
+ {tooltip && (
+
+ )}
);
-
- if (tooltip) {
- buttonContent = (
-
- {buttonContent}
-
- );
- }
-
- 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 (
)}
);
-
- if (tooltip) {
- buttonContent = (
-
- {buttonContent}
-
- );
- }
-
- return buttonContent;
}
}
diff --git a/tgui/packages/tgui/components/Tooltip.js b/tgui/packages/tgui/components/Tooltip.js
new file mode 100644
index 00000000000..f296d3cb8f0
--- /dev/null
+++ b/tgui/packages/tgui/components/Tooltip.js
@@ -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 (
+
+ );
+};
diff --git a/tgui/packages/tgui/components/Tooltip.tsx b/tgui/packages/tgui/components/Tooltip.tsx
deleted file mode 100644
index 8733806cf66..00000000000
--- a/tgui/packages/tgui/components/Tooltip.tsx
+++ /dev/null
@@ -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 {
- containerRef = createRef();
- tooltipRef = createRef();
- 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 (
- <>
-
- { children }
-
-
- {createPortal(
-
- {content}
-
,
- this.portalNode,
- )}
-
- );
- }
-}
diff --git a/tgui/packages/tgui/interfaces/BluespaceSender.js b/tgui/packages/tgui/interfaces/BluespaceSender.js
index d1deed2a906..859c6bb5b13 100644
--- 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-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')} />