Javascript 覆盖装配工工具提示未显示

已创建代码沙盒以显示问题：

我想要一个工具提示，以显示每当我徘徊在一张牌。我需要将一个值从OverlyTrigger传递到工具提示组件。使用以下代码，将鼠标悬停在卡上时不会显示任何内容：

Character.js：

import React from 'react'
import { Card, OverlayTrigger } from 'react-bootstrap'
import Infott from '../components/Infott'

const Character = ({ character }) => {
  return (
    <OverlayTrigger
      trigger='hover'
      placement='bottom'
      overlay={<Infott test={'Test'} />}
    >
      <Card className='my-3 py-3 rounded'>
        <a href={`/character/${character._id}`}>
          <Card.Img src={character.image} />
        </a>
      </Card>
    </OverlayTrigger>
  )
}

export default Character

---

但是，我无法通过我需要的测试值。

OverlyTrigger似乎对某些操作以及它注入的某些属性使用目标工具提示的ref，因此为了正常工作，必须将自定义组件的ref转发到包装在其中的目标工具提示

因此，将工具提示包装到自定义组件中的正确解决方案应该是：

const Infott = React.forwardRef(({test, ...props}, ref) => {
  return (
    <Tooltip id='character-tooltip' ref={ref} placement='bottom' {...props}>
      <strong>{test}</strong>
    </Tooltip>
  );
});

const Infott=React.forwardRef（（{test，…props}，ref）=>{
返回(
{test}
);
});

const Infott = (props) => {
  return (
    <Tooltip id='character-tooltip' placement='bottom' {...props}>
      <strong>{test}</strong>
    </Tooltip>
  )
}

const Infott = React.forwardRef(({test, ...props}, ref) => {
  return (
    <Tooltip id='character-tooltip' ref={ref} placement='bottom' {...props}>
      <strong>{test}</strong>
    </Tooltip>
  );
});