реагировать bootstrap постоянно показывать подсказку - PullRequest
Новая
       4

реагировать bootstrap постоянно показывать подсказку

0 голосов
/ 14 января 2020

Я использую реагировать - 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>

Кто-нибудь знает, как сделать так, чтобы подсказка всегда была видна (независимо от того, нажимаете ли вы или зависаете)

1 Ответ

2 голосов
/ 14 января 2020

Используйте 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>
    </>
  );
}
...