反应引导程序不断显示工具提示

Question

我在这里使用react-bootstrap，试图使工具提示始终显示，但是我不确定如何操作。

这是我没有碰运气的尝试：

  <Card style={{width: '10rem'}}
          className={this.state.selected == value ? 'subItemActive' : 'subItem'}>
        <Card.Img variant="top" src={value.img}/>
        <Card.Body>
            <Card.Title> Lorem ipsum</Card.Title>
            <Card.Text>
                Lorem ipsum
            </Card.Text>
        </Card.Body>
        <ListGroup className="list-group-flush">
            <ListGroupItem>
                + {value.price},-
            </ListGroupItem>
       </ListGroup>
        <Tooltip id="overlay-example" placement={'top'}>
            My Tooltip
        </Tooltip>
    </Card>

---

    <Card style={{width: '10rem'}}
      className={this.state.selected == value ? 'subItemActive' : 'subItem'}>
    <Card.Img variant="top" src={value.img}/>
    <Card.Body>
        <Card.Title> Lorem ipsum</Card.Title>
        <Card.Text>
            Lorem ipsum
        </Card.Text>
    </Card.Body>
    <ListGroup className="list-group-flush">
        <ListGroupItem>
            + {value.price},-
        </ListGroupItem>
   </ListGroup>
    <Overlay show={true} placement="top">
        {props => (
            <Tooltip id="overlay-example" {...props}>
                My Tooltip
            </Tooltip>
        )}
    </Overlay>
</Card>

有人知道如何确保工具提示始终可见（与单击或悬停无关）

Answer 1

使用OverlayTrigger代替Overlay。检查示例here。

export default function App() {
  const getTooltip = () => {
    return <Tooltip id="tooltip">sample text</Tooltip>;
  };
  return (
    <>
      <OverlayTrigger
        trigger="manual"
        defaultShow={true}
        placement="right"
        overlay={getTooltip()}
      >
        <Button>
          Click me!
        </Button>
      </OverlayTrigger>
    </>
  );
}