aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/tooltip-v2.js
blob: 0547822032040b0831ffec0e113fcb03c5ae7a24 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import PropTypes from 'prop-types'
import React, {PureComponent} from 'react'
import {Tooltip as ReactTippy} from 'react-tippy'

export default class Tooltip extends PureComponent {
  static defaultProps = {
    arrow: true,
    children: null,
    containerClassName: '',
    hideOnClick: false,
    onHidden: null,
    position: 'left',
    size: 'small',
    title: null,
    trigger: 'mouseenter',
    wrapperClassName: '',
  }

  static propTypes = {
    arrow: PropTypes.bool,
    children: PropTypes.node,
    containerClassName: PropTypes.string,
    onHidden: PropTypes.func,
    position: PropTypes.oneOf([
      'top',
      'right',
      'bottom',
      'left',
    ]),
    size: PropTypes.oneOf([
      'small', 'regular', 'big',
    ]),
    title: PropTypes.string,
    trigger: PropTypes.any,
    wrapperClassName: PropTypes.string,
  }

  render () {
    const {arrow, children, containerClassName, position, size, title, trigger, onHidden, wrapperClassName } = this.props

    if (!title) {
      return (
        <div className={wrapperClassName}>
          {children}
        </div>
      )
    }

    return (
      <div className={wrapperClassName}>
        <ReactTippy
          className={containerClassName}
          title={title}
          position={position}
          trigger={trigger}
          hideOnClick={false}
          size={size}
          arrow={arrow}
          onHidden={onHidden}
        >
          {children}
        </ReactTippy>
      </div>
    )
  }
}