import React from "react";
import styled from "styled-components";

const TooltipContainer = styled.span`
    position: relative;

    &:hover > .tip {
        display: block;
    }

    & > .tip {
        display: none;
        position: absolute;

        background: #1F2531;
        opacity: 0.9;
        border-radius: 5px;

        color: #FFFFFF;
        padding: 12px 8px;
        width: 100%;
        min-width: 100px;
    }

    & > .tip::after {
        content: "";
        position: absolute;
        opacity: 0.9;
        top: -10px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color:  transparent transparent black transparent;
    }
`;

const Tooltip = ({children, tip}) => {
    return <TooltipContainer>
        {children}
        <span className="tip">{tip}</span>
    </TooltipContainer>
};

export default Tooltip;

<Tooltip tip="I'm a tooltip">
    <p>Example paragraph</p>
</Tooltip>