import React from 'react';
import styled from 'styled-components';
import ReactTooltipBase, { TooltipProps } from 'react-tooltip';

const ReactTooltip = styled(ReactTooltipBase)`
    && {
        font-size: 13px;
        font-weight: 600;
        line-height: 17px;
        max-width: 30vw;
        opacity: 1;
        white-space: normal;
    }
`;

function Tooltip(props: TooltipProps) {
    const defaultProps = {
        clickable: true,
        effect: 'solid',
        delayHide: 150,
    } as TooltipProps;

    return <ReactTooltip {...defaultProps} {...props} />;
}

export default Tooltip;