OverlayTrigger 工具提示不显示答案

【问题标题】：OverlayTrigger Tooltip Not ShowingOverlayTrigger 工具提示不显示
【发布时间】：2020-11-07 22:51:27
【问题描述】：

创建代码框以显示问题： https://codesandbox.io/s/agitated-https-2xjs2?fontsize=14&hidenavigation=1&theme=dark

我希望每当我将鼠标悬停在卡片上时都会显示工具提示。我需要将 OverlayTrigger 中的值传递给 Tooltip 组件。使用以下代码，将鼠标悬停在卡片上时不会显示任何内容：

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

Infott.js：

import React from 'react'
import { Tooltip } from 'react-bootstrap'

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

export default Infott

如果我将className=show 添加到 Tooltip 组件，它会显示并且测试值通过，但它不再放在卡片旁边，而是放在网页的左下角。我的猜测是 OverlayTrigger 和 Tooltip 不在同一页面上。

如果我将叠加层更改为overlay={Infott}，然后将我的工具提示组件更改为

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

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

【问题讨论】：

标签： javascript reactjs tooltip

【解决方案1】：

OverlayTrigger 似乎将目标 Tooltip 的 ref 用于某些操作以及它注入的某些属性，因此为了正常工作，您必须将自定义组件中的 ref 转发到您封装在其中的目标 Tooltip。

因此，将 Tooltip 包裹在自定义组件中的正确解决方案应该是：

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

【讨论】：