Tooltip

A simple text popup tip.

Import: import { Tooltip } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

When To Use

The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.

To provide an explanation of a button/text/operation. It's often used instead of the html title attribute.

Basic Usage

() => (
  <Tooltip content="Tooltip content">
    <Button>Tooltip</Button>
  </Tooltip>
)

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

Placement

() => (
  <>
    <Row style={{ width: '500px' }}>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top">
          <Button style={{ minWidth: '100px' }}>top</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top-start">
          <Button style={{ minWidth: '100px' }}>top-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top-end">
          <Button style={{ minWidth: '100px' }}>top-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right"
        >
          <Button style={{ minWidth: '100px' }}>right</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right-start"
        >
          <Button style={{ minWidth: '100px' }}>right-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right-end"
        >
          <Button style={{ minWidth: '100px' }}>right-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left"
        >
          <Button style={{ minWidth: '100px' }}>left</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left-start"
        >
          <Button style={{ minWidth: '100px' }}>left-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left-end"
        >
          <Button style={{ minWidth: '100px' }}>left-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom"
        >
          <Button style={{ minWidth: '100px' }}>bottom</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom-start"
        >
          <Button style={{ minWidth: '100px' }}>bottom-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom-end"
        >
          <Button style={{ minWidth: '100px' }}>bottom-end</Button>
        </Tooltip>
      </Col>
    </Row>
  </>
)

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

() => (
  <Group>
    <Tooltip content="Tooltip content" trigger="click">
      <Button>Click</Button>
    </Tooltip>
    <Tooltip content="Tooltip content">
       <Button>hover</Button>
    </Tooltip>
  </Group>
)

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

Arrow

Arrow prop can be set to display a arrow.

() => (
  <Tooltip content="Tooltip content" arrow={false}>
    <Button>Arrow</Button>
  </Tooltip>
)

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

Disabled Status

() => {
  return (
    <Tooltip content="Tooltip" disabled>
      <Button>Reference</Button>
    </Tooltip>
  )
}

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

Delay

Delay in seconds, before tooltip is shown on mouse enter or hidden on mouse leave.

() => {
  return (
    <Tooltip content="tooltip" delay={1000}>
      <Button>Reference</Button>
    </Tooltip>
  )
}

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

Control Mode

() => {
  const [visible, setVisible] = React.useState(true);
  const show = () => setVisible(true);
  const hide = () => setVisible(false);
  return (
    <Tooltip content="tooltip">
      <Button onClick={visible ? hide : show}>Reference</Button>
    </Tooltip>
  )
}

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

Interactive Mode

Determines if the tooltip has interactive content inside of it, so that it can be hovered over and clicked inside without hiding.

() => {
  return (
    <Tooltip content="tooltip" interactive>
      <Button>interactive</Button>
    </Tooltip>
  )
}

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