javascript React Bootstrap不断显示工具提示

b1zrtrql 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(164)

我在这里使用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>

如何确保工具提示始终可见（无论单击还是悬停）？

JavaScript

来源：https://stackoverflow.com/questions/59731641/react-bootstrap-constantly-show-tooltip

1条答案

按热度按时间

zxlwwiss1#

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

赞(0）回复(0）举报 2023-05-27

我来回答

javascript React Bootstrap不断显示工具提示

1条答案

相关问题

热门标签

最新问答