// @flow
import * as React from 'react';
import {
	UncontrolledTooltip,
} from 'reactstrap';

type Props = {
	id: string,
	info: string,
	children: React.Node,
};

export class InfoTooltip extends React.PureComponent<Props> {
	constructor(props: Props) {
		super(props);
	}

	target = null

	render = () => (
		<React.Fragment>
			<span id={this.props.id} ref={el => this.target = el }>{ this.props.children }<sup>ℹ</sup></span>
			<UncontrolledTooltip target={() => this.target}>
				{ this.props.info }
			</UncontrolledTooltip>
		</React.Fragment>
	);
}

export default InfoTooltip;
