Bootstrap React 悬停效果

Question

编辑：

我正在尝试 react-bootstrap，因为它也支持工具提示！但我仍然无法获得所需的工具提示效果。按钮以正确的样式显示，但鼠标悬停在按钮上时没有工具提示效果。

我的代码：

import { Tooltip, OverlayTrigger, Button } from 'react-bootstrap'

    const tooltip = (
      <Tooltip id="tooltip"><strong>Holy guacamole!</strong> Check this info.</Tooltip>
    );


    export default function Test (props) {
        return (
            <OverlayTrigger placement="right" overlay={tooltip}>
                <Button bsStyle="default">Holy guacamole!</Button>
            </OverlayTrigger>
        )    

Answer 1

您需要指定通过悬停元素触发叠加层。

像这样：

<OverlayTrigger trigger="hover" placement="right" overlay={tooltip}>
    <Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>

您可以找到更多信息here。