Display a tooltip when you hover over a location (#7472)

Author: andybalaam

src/components/views/elements/Tooltip.tsx

@@ -32,6 +32,7 @@ export enum Alignment {
     Right,
     Top, // Centered
     Bottom, // Centered
+    InnerBottom, // Inside the target, at the bottom
 }
 
 export interface ITooltipProps {
@@ -50,6 +51,8 @@ export interface ITooltipProps {
         // id describing tooltip
         // used to associate tooltip with target for a11y
         id?: string;
+        // If the parent is over this width, act as if it is only this wide
+        maxParentWidth?: number;
 }
 
 @replaceableComponent("views.elements.Tooltip")
@@ -107,11 +110,18 @@ export default class Tooltip extends React.Component<ITooltipProps> {
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
         const width = UIStore.instance.windowWidth;
+        const parentWidth = (
+            this.props.maxParentWidth
+                ? Math.min(parentBox.width, this.props.maxParentWidth)
+                : parentBox.width
+        );
         const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
         const top = baseTop + offset;
         const right = width - parentBox.right - window.pageXOffset - 16;
         const left = parentBox.right + window.pageXOffset + 6;
-        const horizontalCenter = parentBox.right - window.pageXOffset - (parentBox.width / 2);
+        const horizontalCenter = (
+            parentBox.left - window.pageXOffset + (parentWidth / 2)
+        );
         switch (this.props.alignment) {
             case Alignment.Natural:
                 if (parentBox.right > width / 2) {
@@ -136,6 +146,10 @@ export default class Tooltip extends React.Component<ITooltipProps> {
                 style.top = baseTop + parentBox.height;
                 style.left = horizontalCenter;
                 break;
+            case Alignment.InnerBottom:
+                style.top = baseTop + parentBox.height - 50;
+                style.left = horizontalCenter;
+                style.transform = "translate(-50%)";
         }
 
         return style;

src/components/views/elements/TooltipTarget.tsx

@@ -36,6 +36,7 @@ const TooltipTarget: React.FC<IProps> = ({
     alignment,
     yOffset,
     tooltipClassName,
+    maxParentWidth,
     ...rest
 }) => {
     const [isVisible, setIsVisible] = useState(false);
@@ -63,6 +64,7 @@ const TooltipTarget: React.FC<IProps> = ({
                 yOffset={yOffset}
                 alignment={alignment}
                 visible={isVisible}
+                maxParentWidth={maxParentWidth}
             />
         </div>
     );

src/components/views/messages/MLocationBody.tsx

@@ -27,6 +27,8 @@ import { _t } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
 import Modal from '../../../Modal';
 import LocationViewDialog from '../location/LocationViewDialog';
+import TooltipTarget from '../elements/TooltipTarget';
+import { Alignment } from '../elements/Tooltip';
 
 interface IState {
     error: Error;
@@ -93,6 +95,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
             bodyId={this.getBodyId()}
             markerId={this.getMarkerId()}
             error={this.state.error}
+            tooltip={_t("Expand map")}
             onClick={this.onClick}
         />;
     }
@@ -103,10 +106,17 @@ interface ILocationBodyContentProps {
     bodyId: string;
     markerId: string;
     error: Error;
+    tooltip?: string;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 
 export function LocationBodyContent(props: ILocationBodyContentProps) {
+    const mapDiv = <div
+        id={props.bodyId}
+        onClick={props.onClick}
+        className="mx_MLocationBody_map"
+    />;
+
     return <div className="mx_MLocationBody">
         {
             props.error
@@ -115,11 +125,17 @@ export function LocationBodyContent(props: ILocationBodyContentProps) {
                 </div>
                 : null
         }
-        <div
-            id={props.bodyId}
-            onClick={props.onClick}
-            className="mx_MLocationBody_map"
-        />
+        {
+            props.tooltip
+                ? <TooltipTarget
+                    label={props.tooltip}
+                    alignment={Alignment.InnerBottom}
+                    maxParentWidth={450}
+                >
+                    { mapDiv }
+                </TooltipTarget>
+                : mapDiv
+        }
         <div className="mx_MLocationBody_marker" id={props.markerId}>
             <div className="mx_MLocationBody_markerBorder">
                 <MemberAvatar

src/i18n/strings/en_EN.json

@@ -2091,6 +2091,7 @@
     "Declining …": "Declining …",
     "%(name)s wants to verify": "%(name)s wants to verify",
     "You sent a verification request": "You sent a verification request",
+    "Expand map": "Expand map",
     "Failed to load map": "Failed to load map",
     "Vote not registered": "Vote not registered",
     "Sorry, your vote was not registered. Please try again.": "Sorry, your vote was not registered. Please try again.",