Tooltip

1
() => (
2
  <Tooltip content="Tooltip content">
3
    <Button>Tooltip</Button>
4
  </Tooltip>
5
)
6

1
() => (
2
  <>
3
    <Row style={{ width: '500px' }}>
4
      <Col span={4}>
5
        <Tooltip content="Tooltip content Tooltip content" placement="top">
6
          <Button style={{ minWidth: '100px' }}>top</Button>
7
        </Tooltip>
8
      </Col>
9
      <Col span={4}>
10
        <Tooltip content="Tooltip content Tooltip content" placement="top-start">
11
          <Button style={{ minWidth: '100px' }}>top-start</Button>
12
        </Tooltip>
13
      </Col>
14
      <Col span={4}>
15
        <Tooltip content="Tooltip content Tooltip content" placement="top-end">
16
          <Button style={{ minWidth: '100px' }}>top-end</Button>
17
        </Tooltip>
18
      </Col>
19
      <Col span={4}>
20
        <Tooltip
21
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
22
          placement="right"
23
        >
24
          <Button style={{ minWidth: '100px' }}>right</Button>
25
        </Tooltip>
26
      </Col>
27
      <Col span={4}>
28
        <Tooltip
29
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
30
          placement="right-start"
31
        >
32
          <Button style={{ minWidth: '100px' }}>right-start</Button>
33
        </Tooltip>
34
      </Col>
35
      <Col span={4}>
36
        <Tooltip
37
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
38
          placement="right-end"
39
        >
40
          <Button style={{ minWidth: '100px' }}>right-end</Button>
41
        </Tooltip>
42
      </Col>
43
      <Col span={4}>
44
        <Tooltip
45
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
46
          placement="left"
47
        >
48
          <Button style={{ minWidth: '100px' }}>left</Button>
49
        </Tooltip>
50
      </Col>
51
      <Col span={4}>
52
        <Tooltip
53
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
54
          placement="left-start"
55
        >
56
          <Button style={{ minWidth: '100px' }}>left-start</Button>
57
        </Tooltip>
58
      </Col>
59
      <Col span={4}>
60
        <Tooltip
61
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
62
          placement="left-end"
63
        >
64
          <Button style={{ minWidth: '100px' }}>left-end</Button>
65
        </Tooltip>
66
      </Col>
67
      <Col span={4}>
68
        <Tooltip
69
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
70
          placement="bottom"
71
        >
72
          <Button style={{ minWidth: '100px' }}>bottom</Button>
73
        </Tooltip>
74
      </Col>
75
      <Col span={4}>
76
        <Tooltip
77
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
78
          placement="bottom-start"
79
        >
80
          <Button style={{ minWidth: '100px' }}>bottom-start</Button>
81
        </Tooltip>
82
      </Col>
83
      <Col span={4}>
84
        <Tooltip
85
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
86
          placement="bottom-end"
87
        >
88
          <Button style={{ minWidth: '100px' }}>bottom-end</Button>
89
        </Tooltip>
90
      </Col>
91
    </Row>
92
  </>
93
)
94

1
() => (
2
  <Group>
3
     <Tooltip content="Tooltip content" trigger="click">
4
        <Button>Click</Button>
5
     </Tooltip>
6
     <Tooltip content="Tooltip content" trigger="focus">
7
        <Button>Click</Button>
8
     </Tooltip>
9
     <Tooltip content="Tooltip content">
10
        <Button>hover</Button>
11
     </Tooltip>
12
  </Group>
13
)
14

1
() => (
2
  <Tooltip content="Tooltip content" arrow={false}>
3
    <Button>Arrow</Button>
4
  </Tooltip>
5
)
6

1
() => {
2
  return (
3
    <Tooltip content="Tooltip" disabled>
4
      <Button>Reference</Button>
5
    </Tooltip>
6
  )
7
}
8

1
() => {
2
  return (
3
    <Tooltip content="tooltip" delay={1000}>
4
      <Button>Reference</Button>
5
    </Tooltip>
6
  )
7
}
8

1
() => {
2
  const [visible, setVisible] = React.useState(true);
3
  const show = () => setVisible(true);
4
  const hide = () => setVisible(false);
5
  return (
6
    <Tooltip content="tooltip">
7
      <Button onClick={visible ? hide : show}>Reference</Button>
8
    </Tooltip>
9
  )
10
}
11

1
() => {
2
  return (
3
    <Tooltip content="tooltip" interactive>
4
      <Button>interactive</Button>
5
    </Tooltip>
6
  )
7
}
8