Improve tooltip positioning

Signed-off-by: Michael Weimann <michaelw@matrix.org>

res/css/views/elements/_MiniAvatarUploader.scss

@@ -25,7 +25,9 @@ limitations under the License.
         z-index: unset;
         width: max-content;
         left: 72px;
-        top: 0;
+        // top edge starting at 50 % of parent - 50 % of itself -> centered vertically
+        top: 50%;
+        transform: translateY(-50%);
     }
 
     .mx_MiniAvatarUploader_indicator {

res/css/views/elements/_Tooltip.scss

@@ -70,8 +70,6 @@ limitations under the License.
     font-weight: 500;
     max-width: 300px;
     word-break: break-word;
-    margin-left: 6px;
-    margin-right: 6px;
 
     background-color: #21262C; // Same on both themes
     color: $accent-fg-color;

res/css/views/rooms/_RoomSublist.scss

@@ -406,10 +406,6 @@ limitations under the License.
     }
 }
 
-.mx_RoomSublist_addRoomTooltip {
-    margin-top: -3px;
-}
-
 .mx_RoomSublist_skeletonUI {
     position: relative;
     margin-left: 4px;

src/components/structures/SpaceHierarchy.tsx

@@ -64,6 +64,7 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
+import { Alignment } from "../views/elements/Tooltip";
 
 interface IProps {
     space: Room;
@@ -583,7 +584,7 @@ const ManageButtons = ({ hierarchy, selected, setSelected, setError }: IManageBu
         Button = AccessibleTooltipButton;
         props = {
             tooltip: _t("Select a room below first"),
-            yOffset: -40,
+            alignment: Alignment.Top,
         };
     }
 

src/components/views/beta/BetaCard.tsx

@@ -60,7 +60,6 @@ export const BetaPill = ({
                 </div>
             </div>}
             onClick={onClick}
-            yOffset={-10}
         >
             { _t("Beta") }
         </AccessibleTooltipButton>;

src/components/views/dialogs/ForwardDialog.tsx

@@ -136,7 +136,6 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
             className="mx_ForwardList_roomButton"
             onClick={jumpToRoom}
             title={_t("Open room")}
-            yOffset={-20}
             alignment={Alignment.Top}
         >
             <DecoratedRoomAvatar room={room} avatarSize={32} />
@@ -151,7 +150,6 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
             onClick={send}
             disabled={disabled}
             title={title}
-            yOffset={-20}
             alignment={Alignment.Top}
         >
             <div className="mx_ForwardList_sendLabel">{ _t("Send") }</div>

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -26,7 +26,6 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
     label?: string;
     tooltipClassName?: string;
     forceHide?: boolean;
-    yOffset?: number;
     alignment?: Alignment;
     onHover?: (hovering: boolean) => void;
     onHideTooltip?(ev: SyntheticEvent): void;
@@ -76,13 +75,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
 
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, onHideTooltip,
+        const { title, tooltip, children, tooltipClassName, forceHide, alignment, onHideTooltip,
             ...props } = this.props;
 
         const tip = this.state.hover && <Tooltip
             tooltipClassName={tooltipClassName}
             label={tooltip || title}
-            yOffset={yOffset}
             alignment={alignment}
         />;
         return (

src/components/views/elements/FacePile.tsx

@@ -51,7 +51,7 @@ const FacePile: FC<IProps> = ({ members, faceSize, overflow, tooltip, children,
 
     return <div {...props} className="mx_FacePile">
         { tooltip ? (
-            <TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
+            <TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip}>
                 { pileContents }
             </TextWithTooltip>
         ) : (

src/components/views/elements/Tooltip.tsx

@@ -23,8 +23,6 @@ import classNames from 'classnames';
 
 import UIStore from "../../../stores/UIStore";
 
-const MIN_TOOLTIP_HEIGHT = 25;
-
 export enum Alignment {
     Natural, // Pick left or right
     Left,
@@ -33,7 +31,6 @@ export enum Alignment {
     Bottom, // Centered
     InnerBottom, // Inside the target, at the bottom
     TopRight, // On top of the target, right aligned
-    TopCenter, // On top of the target, center aligned
 }
 
 export interface ITooltipProps {
@@ -48,7 +45,6 @@ export interface ITooltipProps {
         // the react element to put into the tooltip
         label: React.ReactNode;
         alignment?: Alignment; // defaults to Natural
-        yOffset?: number;
         // id describing tooltip
         // used to associate tooltip with target for a11y
         id?: string;
@@ -66,7 +62,6 @@ export default class Tooltip extends React.Component<ITooltipProps> {
 
     public static readonly defaultProps = {
         visible: true,
-        yOffset: 0,
         alignment: Alignment.Natural,
     };
 
@@ -102,50 +97,49 @@ export default class Tooltip extends React.Component<ITooltipProps> {
     // positioned, also taking into account any window zoom
     private updatePosition(style: CSSProperties) {
         const parentBox = this.parent.getBoundingClientRect();
-        let offset = 0;
-        if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
-            offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2);
-        } else {
-            // The tooltip is larger than the parent height: figure out what offset
-            // we need so that we're still centered.
-            offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
-        }
         const width = UIStore.instance.windowWidth;
+        const spacing = 6;
         const parentWidth = (
             this.props.maxParentWidth
                 ? Math.min(parentBox.width, this.props.maxParentWidth)
                 : parentBox.width
         );
-        const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.scrollY;
+        const baseTop = parentBox.top + window.scrollY;
-        const top = baseTop + offset;
+        const centerTop = parentBox.top + window.scrollY + (parentBox.height / 2);
         const right = width - parentBox.left - window.scrollX;
         const left = parentBox.right + window.scrollX;
         const horizontalCenter = (
             parentBox.left - window.scrollX + (parentWidth / 2)
         );
+
         switch (this.props.alignment) {
             case Alignment.Natural:
                 if (parentBox.right > width / 2) {
-                    style.right = right;
+                    style.right = right + spacing;
-                    style.top = top;
+                    style.top = centerTop;
+                    style.transform = "translateY(-50%)";
                     break;
                 }
                 // fall through to Right
             case Alignment.Right:
-                style.left = left;
+                style.left = left + spacing;
-                style.top = top;
+                style.top = centerTop;
+                style.transform = "translateY(-50%)";
                 break;
             case Alignment.Left:
-                style.right = right;
+                style.right = right + spacing;
-                style.top = top;
+                style.top = centerTop;
+                style.transform = "translateY(-50%)";
                 break;
             case Alignment.Top:
-                style.top = baseTop - 16;
+                style.top = baseTop - spacing;
                 style.left = horizontalCenter;
+                style.transform = "translate(-50%, -100%)";
                 break;
             case Alignment.Bottom:
-                style.top = baseTop + parentBox.height;
+                style.top = baseTop + parentBox.height + spacing;
                 style.left = horizontalCenter;
+                style.transform = "translate(-50%)";
                 break;
             case Alignment.InnerBottom:
                 style.top = baseTop + parentBox.height - 50;
@@ -153,14 +147,10 @@ export default class Tooltip extends React.Component<ITooltipProps> {
                 style.transform = "translate(-50%)";
                 break;
             case Alignment.TopRight:
-                style.top = baseTop - 5;
+                style.top = baseTop - spacing;
                 style.right = width - parentBox.right - window.scrollX;
-                style.transform = "translate(5px, -100%)";
+                style.transform = "translateY(-100%)";
                 break;
-            case Alignment.TopCenter:
-                style.top = baseTop - 5;
-                style.left = horizontalCenter;
-                style.transform = "translate(-50%, -100%)";
         }
 
         return style;

src/components/views/elements/TooltipTarget.tsx

@@ -34,7 +34,6 @@ const TooltipTarget: React.FC<IProps> = ({
     id,
     label,
     alignment,
-    yOffset,
     tooltipClassName,
     maxParentWidth,
     ...rest
@@ -51,7 +50,6 @@ const TooltipTarget: React.FC<IProps> = ({
         className={className}
         tooltipClassName={tooltipClassName}
         label={label}
-        yOffset={yOffset}
         alignment={alignment}
         visible={isVisible}
         maxParentWidth={maxParentWidth}

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -166,7 +166,6 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
             title={openTitle}
             forceHide={!(isPinned || isMaximised)}
             disabled={isPinned || isMaximised}
-            yOffset={-48}
         >
             <WidgetAvatar app={app} />
             <span>{ name }</span>
@@ -178,7 +177,6 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
             isExpanded={menuDisplayed}
             onClick={openMenu}
             title={_t("Options")}
-            yOffset={-24}
         /> }
 
         <AccessibleTooltipButton
@@ -186,13 +184,11 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
             onClick={togglePin}
             title={pinTitle}
             disabled={cannotPin}
-            yOffset={-24}
         />
         <AccessibleTooltipButton
             className="mx_RoomSummaryCard_app_maximiseToggle"
             onClick={toggleMaximised}
             title={maximiseTitle}
-            yOffset={-24}
         />
 
         { contextMenu }

src/components/views/rooms/MessageComposer.tsx

@@ -421,7 +421,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             recordingTooltip = <Tooltip
                 label={_t("%(seconds)ss left", { seconds: secondsLeft })}
                 alignment={Alignment.Top}
-                yOffset={-50}
             />;
         }
 

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -233,7 +233,7 @@ interface ReadReceiptPersonProps extends IReadReceiptProps {
 
 function ReadReceiptPerson({ userId, roomMember, ts, isTwelveHour, onAfterClick }: ReadReceiptPersonProps) {
     const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
-        alignment: Alignment.TopCenter,
+        alignment: Alignment.Top,
         tooltipClassName: "mx_ReadReceiptGroup_person--tooltip",
         label: (
             <>

src/components/views/voip/CallView/CallViewButtons.tsx

@@ -39,8 +39,6 @@ import { MediaDeviceKindEnum } from "../../../../MediaDeviceHandler";
 // height to get the max height of the video
 const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
 
-const TOOLTIP_Y_OFFSET = -24;
-
 const CONTROLS_HIDE_DELAY = 2000;
 
 interface IButtonProps extends Omit<React.ComponentProps<typeof AccessibleTooltipButton>, "title"> {
@@ -69,7 +67,6 @@ const CallViewToggleButton: React.FC<IButtonProps> = ({
             className={classes}
             title={isOn ? onLabel : offLabel}
             alignment={Alignment.Top}
-            yOffset={TOOLTIP_Y_OFFSET}
             {...props}
         >
             { children }
@@ -267,7 +264,6 @@ export default class CallViewButtons extends React.Component<IProps, IState> {
                     isExpanded={this.state.showDialpad}
                     title={_t("Dialpad")}
                     alignment={Alignment.Top}
-                    yOffset={TOOLTIP_Y_OFFSET}
                 /> }
                 <CallViewDropdownButton
                     state={!this.props.buttonsState.micMuted}
@@ -306,14 +302,12 @@ export default class CallViewButtons extends React.Component<IProps, IState> {
                     isExpanded={this.state.showMoreMenu}
                     title={_t("More")}
                     alignment={Alignment.Top}
-                    yOffset={TOOLTIP_Y_OFFSET}
                 /> }
                 <AccessibleTooltipButton
                     className="mx_CallViewButtons_button mx_CallViewButtons_button_hangup"
                     onClick={this.props.handlers.onHangupClick}
                     title={_t("Hangup")}
                     alignment={Alignment.Top}
-                    yOffset={TOOLTIP_Y_OFFSET}
                 />
             </div>
         );

test/components/views/elements/TooltipTarget-test.tsx

@@ -30,7 +30,6 @@ describe('<TooltipTarget />', () => {
         "className": 'test className',
         "tooltipClassName": 'test tooltipClassName',
         "label": 'test label',
-        "yOffset": 1,
         "alignment": Alignment.Left,
         "id": 'test id',
         'data-test-id': 'test',
@@ -64,13 +63,17 @@ describe('<TooltipTarget />', () => {
         expect(getVisibleTooltip()).toBeFalsy();
     });
 
-    it('displays tooltip on mouseover', () => {
+    for (const alignment in Alignment) {
-        const wrapper = getComponent();
+        if (isNaN(Number(alignment))) {
+            it(`displays ${alignment} aligned tooltip on mouseover`, () => {
+                const wrapper = getComponent({ alignment: Alignment[alignment] });
                 act(() => {
                     Simulate.mouseOver(wrapper);
                 });
                 expect(getVisibleTooltip()).toMatchSnapshot();
             });
+        }
+    }
 
     it('hides tooltip on mouseleave', () => {
         const wrapper = getComponent();

test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap

@@ -1,9 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TooltipTarget /> displays tooltip on mouseover 1`] = `
+exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
-  style="right: 1024px; top: -26px; display: block;"
+  style="top: 6px; left: 0px; transform: translate(-50%); display: block;"
+>
+  <div
+    class="mx_Tooltip_chevron"
+  />
+  test label
+</div>
+`;
+
+exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`] = `
+<div
+  class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  style="top: -50px; left: 0px; transform: translate(-50%); display: block;"
+>
+  <div
+    class="mx_Tooltip_chevron"
+  />
+  test label
+</div>
+`;
+
+exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
+<div
+  class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  style="right: 1030px; top: 0px; transform: translateY(-50%); display: block;"
+>
+  <div
+    class="mx_Tooltip_chevron"
+  />
+  test label
+</div>
+`;
+
+exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
+<div
+  class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  style="left: 6px; top: 0px; transform: translateY(-50%); display: block;"
+>
+  <div
+    class="mx_Tooltip_chevron"
+  />
+  test label
+</div>
+`;
+
+exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
+<div
+  class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  style="left: 6px; top: 0px; transform: translateY(-50%); display: block;"
+>
+  <div
+    class="mx_Tooltip_chevron"
+  />
+  test label
+</div>
+`;
+
+exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
+<div
+  class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  style="top: -6px; left: 0px; transform: translate(-50%, -100%); display: block;"
+>
+  <div
+    class="mx_Tooltip_chevron"
+  />
+  test label
+</div>
+`;
+
+exports[`<TooltipTarget /> displays TopRight aligned tooltip on mouseover 1`] = `
+<div
+  class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  style="top: -6px; right: 1024px; transform: translateY(-100%); display: block;"
 >
   <div
     class="mx_Tooltip_chevron"