如何为表单中每个输入字段设置不同的React Popper Tooltip？

这个问题很常见——你现在把所有Tooltip都绑定到了同一个usePopperTooltip实例上，导致它们共享同一个可见性状态和DOM引用，自然会出现所有Tooltip内容相同、状态同步的问题。下面是具体的解决方案：

核心思路 #

将每个Tooltip的逻辑封装成独立的组件，让每个组件拥有自己的usePopperTooltip实例，各自管理自己的可见性状态、触发器引用和提示内容，实现完全独立的控制。

第一步：封装独立的Tooltip组件 #

创建一个可复用的FieldTooltip组件，它接收自定义提示内容作为props，内部独立处理Popper逻辑：

import { usePopperTooltip } from 'react-popper-tooltip';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';

const FieldTooltip = ({ tooltipContent }) => {
  const {
    getArrowProps,
    getTooltipProps,
    setTooltipRef,
    setTriggerRef,
    visible,
  } = usePopperTooltip({
    trigger: 'hover',
    placement: 'right',
    closeOnOutsideClick: false,
    // 如果不需要外部控制可见性，可以移除下面两行
    // visible: controlledVisible,
    // onVisibleChange: setControlledVisible
  });

  return (
    <>
      <div className="field-info" ref={setTriggerRef}>
        <Icon size="medium">
          <FontAwesomeIcon icon={faInfoCircle} size="lg" />
        </Icon>
      </div>
      {visible && (
        <div ref={setTooltipRef} {...getTooltipProps({ className: 'tooltip-container' })}>
          {tooltipContent}
          <div {...getArrowProps({ className: 'tooltip-arrow' })} />
        </div>
      )}
    </>
  );
};

export default FieldTooltip;

第二步：在父组件中复用组件并传入不同内容 #

在你的表单组件里，直接使用封装好的FieldTooltip，给每个字段传递对应的提示内容即可：

import FieldTooltip from './FieldTooltip';

// 父组件部分
return (
  <>
    <TextBox label="Title" className="title-field" name="title" type="text" isRequired={true} />
    <FieldTooltip tooltipContent="这是标题字段的提示：请输入简洁清晰的内容" />
    
    <TextBox label="Price" className="price-field" name="price" type="text" isRequired={true} />
    <FieldTooltip tooltipContent="这是价格字段的提示：仅支持数字，最多保留两位小数" />
  </>
);

可选：支持外部控制可见性 #

如果你需要手动控制某个Tooltip的显示/隐藏（比如通过按钮触发），可以给FieldTooltip添加外部控制的props：

// 修改FieldTooltip组件，支持外部状态控制
const FieldTooltip = ({ tooltipContent, controlledVisible, onVisibleChange }) => {
  const {
    getArrowProps,
    getTooltipProps,
    setTooltipRef,
    setTriggerRef,
    visible,
  } = usePopperTooltip({
    trigger: 'hover',
    placement: 'right',
    closeOnOutsideClick: false,
    visible: controlledVisible,
    onVisibleChange: onVisibleChange
  });

  // 其余代码不变
};

然后在父组件中为每个Tooltip维护独立的状态：

import { useState } from 'react';
import FieldTooltip from './FieldTooltip';

// 父组件部分
const [titleTooltipVisible, setTitleTooltipVisible] = useState(false);
const [priceTooltipVisible, setPriceTooltipVisible] = useState(false);

return (
  <>
    <TextBox label="Title" className="title-field" name="title" type="text" isRequired={true} />
    <FieldTooltip 
      tooltipContent="这是标题字段的提示：请输入简洁清晰的内容"
      controlledVisible={titleTooltipVisible}
      onVisibleChange={setTitleTooltipVisible}
    />
    
    <TextBox label="Price" className="price-field" name="price" type="text" isRequired={true} />
    <FieldTooltip 
      tooltipContent="这是价格字段的提示：仅支持数字，最多保留两位小数"
      controlledVisible={priceTooltipVisible}
      onVisibleChange={setPriceTooltipVisible}
    />
  </>
);

为什么这样能解决问题？ #

每个FieldTooltip组件都会调用一次usePopperTooltip，生成独立的状态（visible）和DOM引用（setTriggerRef、setTooltipRef），彻底避免了多个Tooltip共享同一实例导致的状态混乱和内容重复问题。

内容的提问来源于stack exchange，提问作者tkamath99