Page MenuHomePhorge
Files F32220197

D4911.1765191142.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D4911.1765191142.diff
View Options

diff --git a/web/chat/tooltip-provider.js b/web/chat/tooltip-provider.js
--- a/web/chat/tooltip-provider.js
+++ b/web/chat/tooltip-provider.js
@@ -1,9 +1,11 @@
// @flow
+import classNames from 'classnames';
import invariant from 'invariant';
import * as React from 'react';
import type { TooltipPositionStyle } from './tooltip-utils';
+import css from './tooltip.css';
const onMouseLeaveSourceDisappearTimeoutMs = 200;
const onMouseLeaveTooltipDisappearTimeoutMs = 100;
@@ -112,7 +114,37 @@
tooltipCancelTimer.current = timer;
}, [clearCurrentTooltip]);
- const tooltip = React.useMemo(() => {}, []);
+ const tooltip = React.useMemo(() => {
+ if (!tooltipNode || !tooltipPosition) {
+ return null;
+ }
+ const tooltipContainerStyle = {
+ position: 'absolute',
+ top: tooltipPosition.yCoord,
+ left: tooltipPosition.xCoord,
+ };
+
+ const { verticalPosition, horizontalPosition } = tooltipPosition;
+
+ const tooltipClassName = classNames(css.tooltipAbsolute, {
+ [css.tooltipAbsoluteLeft]: horizontalPosition === 'right',
+ [css.tooltipAbsoluteRight]: horizontalPosition === 'left',
+ [css.tooltipAbsoluteTop]: verticalPosition === 'bottom',
+ [css.tooltipAbsoluteBottom]: verticalPosition === 'top',
+ });
+
+ return (
+ <div style={tooltipContainerStyle}>
+ <div
+ className={tooltipClassName}
+ onMouseEnter={onMouseEnterTooltip}
+ onMouseLeave={onMouseLeaveTooltip}
+ >
+ {tooltipNode}
+ </div>
+ </div>
+ );
+ }, [onMouseEnterTooltip, onMouseLeaveTooltip, tooltipNode, tooltipPosition]);
const value = React.useMemo(
() => ({
diff --git a/web/chat/tooltip.css b/web/chat/tooltip.css
--- a/web/chat/tooltip.css
+++ b/web/chat/tooltip.css
@@ -46,3 +46,23 @@
overflow: auto;
min-width: 72px;
}
+
+div.tooltipAbsolute {
+ position: absolute;
+}
+
+div.tooltipAbsoluteLeft {
+ left: 0;
+}
+
+div.tooltipAbsoluteRight {
+ right: 0;
+}
+
+div.tooltipAbsoluteTop {
+ top: 0;
+}
+
+div.tooltipAbsoluteBottom {
+ bottom: 0;
+}

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 8, 10:52 AM (3 h, 59 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5843396
Default Alt Text
D4911.1765191142.diff (2 KB)

Event Timeline