import * as React from 'react';
import ReactTooltip from 'react-tooltip';

interface HelpTooltipProps {
    style?: React.CSSProperties;
    explanation: React.ReactNode;
}

export const HelpTooltip = (props: HelpTooltipProps) => {
    return (
        <div
            style={{ ...props.style }}
            className="inline-block"
            data-tip={props.explanation}
            data-for="helpTooltip"
            data-multiline={true}
        >
            <i style={{ fontSize: 16 }} className="zmdi zmdi-help" />
            <ReactTooltip id="helpTooltip" />
        </div>
    );
};