custom tooltip

index.tsx

import React, {FC, ReactElement} from 'react';
import styled from 'styled-components';
import DialogActions from '@material-ui/core/DialogActions';
import {Button, Tooltip, Typography, withStyles} from '@material-ui/core';
import {Theme} from '@material-ui/core/styles';
import {TooltipProps} from "@material-ui/core/Tooltip/Tooltip";

const StyledTooltipTitle = styled(Typography)`
    font-size: 18px;
    font-weight: 600;
`;

const StyledTooltipParagraph = styled(Typography)`
    font-size: 14px;
    margin: 10px 0;
`;

const StyledOKButton = styled(Button)`
    background: white;
    width: 85px;
    height: 25px;
    color: #693dff;
    border: 1px solid #6366ff;
    border-radius: 3px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
`;

interface IProps extends TooltipProps {
    isOpen: boolean
    setIsOpen: (b: boolean) => void
    title: string
    paragraph: string | ReactElement
    buttonTitle?: string
}

export const CustomTooltip: FC<IProps> = ({
                                              isOpen,
                                              setIsOpen,
                                              title,
                                              paragraph,
                                              buttonTitle = 'OK',
                                              children,
                                              ...tooltipProps
                                          }) => {
    const CustomStyledTooltip = withStyles((theme: Theme) => ({
        tooltip: {
            backgroundColor: '#693dff',
            color: 'white',
            fontSize: theme.typography.pxToRem(12),
        },
        arrow: {
            '&:before': {
                backgroundColor: '#693dff'
            }
        }
    }))(Tooltip);

    return <CustomStyledTooltip
        open={isOpen}
        arrow
        interactive
        placement={'right-end'}
        {...tooltipProps}
        title={<>
            <StyledTooltipTitle>{title}</StyledTooltipTitle>
            <StyledTooltipParagraph>{paragraph}</StyledTooltipParagraph>

            <DialogActions>
                <div>
                    <StyledOKButton variant='contained'
                                    onClick={() => setIsOpen(false)}>
                        {buttonTitle}
                    </StyledOKButton>
                </div>
            </DialogActions>

        </>}
    >
        {children}
    </CustomStyledTooltip>
}