TooltipHost callout is not closed when mouse gets out of content

Question

I have the TooltipHost component listed below. After callout is shown, if I move the mouse to gapspace, e.g. to the area between button and callout, callout stays visible.

I want the callout to be closed when mouse gets out of button, even if it is inside the gapspace.

import * as React from "react";
import {
  TooltipHost,
  DefaultButton,
  DirectionalHint
} from "office-ui-fabric-react";

export const ButtonWithTooltip: React.FC<any> = () => {
  return (
    <>
      <TooltipHost
        content="tooltip content"
        calloutProps={{
          gapSpace: 60,
          calloutMaxWidth: 150,
          isBeakVisible: false,
          directionalHint: DirectionalHint.bottomLeftEdge
        }}
      >
        <DefaultButton styles={{ root: { width: "100%" } }} allowDisabledFocus>
          Submit
        </DefaultButton>
      </TooltipHost>
    </>
  );
};

Answer 1

This appears to be expected behavior since the tooltip is getting closed once the mouse leaves tooltip container

To control TooltipHost component visibility the following methods could be utilized:

• ITooltipHost.show - Shows the tooltip
• ITooltipHost.dismiss - Dismisses the tooltip

The following example demonstrates how to hide a tooltip once mouse leaves a button

import {
  DefaultButton,
  DirectionalHint,
  ITooltipHost,
  TooltipHost
} from "office-ui-fabric-react";
import * as React from "react";
import { useRef } from "react";

const ButtonWithTooltip: React.FC<any> = () => {
  const tooltipRef = useRef<ITooltipHost>(null);

  function handleMouseLeave(e: any): void {
    if (tooltipRef.current) {
      tooltipRef.current.dismiss();
    }
  }

  return (
    <>
      <TooltipHost
        componentRef={tooltipRef}
        content="tooltip content"
        calloutProps={{

          gapSpace: 90,
          calloutMaxWidth: 150,
          isBeakVisible: true,
          directionalHint: DirectionalHint.bottomLeftEdge
        }}
      >
        <DefaultButton
          onMouseLeave={handleMouseLeave}
          styles={{ root: { width: "100%" } }}
          allowDisabledFocus={true}
        >
          Submit
        </DefaultButton>
      </TooltipHost>
    </>
  );
};

Demo