React Bootstrap 不断显示工具提示

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. 在这里查看示例。

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>
    </>
  );
}