Improve tooltip positioning

Signed-off-by: Michael Weimann <[email protected]>

Author: weeman1337

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,65 +97,60 @@ 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 top = baseTop + offset;
+        const baseTop = parentBox.top + window.scrollY;
+        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.top = top;
+                    style.right = right + spacing;
+                    style.top = centerTop;
+                    style.transform = "translateY(-50%)";
                     break;
                 }
                 // fall through to Right
             case Alignment.Right:
-                style.left = left;
-                style.top = top;
+                style.left = left + spacing;
+                style.top = centerTop;
+                style.transform = "translateY(-50%)";
                 break;
             case Alignment.Left:
-                style.right = right;
-                style.top = top;
+                style.right = right + spacing;
+                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;
                 style.left = horizontalCenter;
                 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}