import React from 'react';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';

function Tooltip(props) {
    return (
        <span
            data-for={props.id}
            data-tip={props.tip}
            data-place={props.place}
            data-class={props.className}
            data-effect="solid"
            data-html
            className={props.spanClassName}
        >
            {props.children}
            <ReactTooltip id={props.id} />
        </span>
    );
}

Tooltip.propTypes = {
    id: PropTypes.string.isRequired,
    tip: PropTypes.string.isRequired,
    place: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    spanClassName: PropTypes.string,
};

Tooltip.defaultProps = {
    className: '',
    place: 'top',
    spanClassName: '',
};

export default Tooltip;