未显示OverlayTrigger工具提示
未显示OverlayTrigger工具提示
提问于 2020-11-08 06:51:28
创建了用于显示问题的codesandbox：https://codesandbox.io/s/agitated-https-2xjs2?fontsize=14&hidenavigation=1&theme=dark
当我将鼠标悬停在卡片上时，我想要一个工具提示来显示。我需要从OverlayTrigger向工具提示组件传递一个值。使用以下代码，将鼠标悬停在卡片上时不会显示任何内容：
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 CharacterInfott.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添加到工具提示组件，它将显示并传递测试值，但它不再放在卡片旁边，而是放在网页的左下角。我猜OverlayTrigger和工具提示不在同一页上。
如果我将overlay更改为overlay={Infott}，然后将我的工具提示组件更改为，则可以在正确的位置显示工具提示位置
const Infott = (props) => {
return (
<Tooltip id='character-tooltip' placement='bottom' {...props}>
<strong>{test}</strong>
</Tooltip>
)
}但是我不能通过我需要的测试值。
回答 1
Stack Overflow用户
发布于 2021-04-27 23:33:04
OverlayTrigger似乎在一些操作以及它注入的一些属性中使用了对目标工具提示的引用，因此为了正常工作，您必须将自定义组件中的引用转发到包装在其中的目标工具提示。
因此，将工具提示包装在自定义组件中的正确解决方案应该如下所示：
const Infott = React.forwardRef(({test, ...props}, ref) => {
return (
<Tooltip id='character-tooltip' ref={ref} placement='bottom' {...props}>
<strong>{test}</strong>
</Tooltip>
);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64733182
复制相关文章
相似问题
腾讯云开发者
