当鼠标离开内容时，TooltipHost 标注不会关闭

Question

我有下面列出的 TooltipHost 组件。显示标注后，如果我将鼠标移动到间隙空间，例如到按钮和标注之间的区域，标注保持可见。

我希望当鼠标离开按钮时关闭标注，即使它在间隙空间内。

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

这似乎是预期的行为，因为一旦鼠标离开工具提示容器，工具提示就会关闭

要控制 TooltipHost component 可见性，可以使用以下方法：

ITooltipHost.show - 显示工具提示
ITooltipHost.dismiss - 关闭工具提示

以下示例演示如何在鼠标离开按钮后隐藏工具提示

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

当鼠标离开内容时，TooltipHost 标注不会关闭

TooltipHost callout is not closed when mouse gets out of content

office-ui-fabric