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

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>
     );