@bigfishtv/cockpit/src/components/InfoTooltip.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import Icon from './Icon'

/**
 * Info tooltip component
 */
export default class InfoTooltip extends Component {
	static propTypes = {
		/** Tooltip text */
		text: PropTypes.string,
		/** Direction, default 'top' */
		direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
	}

	static defaultProps = {
		direction: 'top',
	}

	render() {
		return (
			<span data-tooltip={this.props.text} data-tooltip-direction={this.props.direction}>
				{this.props.children || <Icon name="info" size="16" />}
			</span>
		)
	}
}