{"size": 926, "ext": "js", "max_stars_repo_path": "src/components/Tooltip/style.js", "max_stars_repo_name": "MarcinLesinski/react-samples", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Tooltip/style.js", "max_issues_repo_name": "MarcinLesinski/react-samples", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Tooltip/style.js", "max_forks_repo_name": "MarcinLesinski/react-samples", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.7435897436, "max_line_length": 59, "alphanum_fraction": 0.5572354212}
import styled from 'styled-components'

const style = {
    tooltip: {
        background: '#444'
    }
}

const Container = styled.span`
    border-bottom: 2px dotted #444;
    position: relative;
    color: white;
    //hint body
    :hover::after {
        content:  '${props => props.hint}';    
        position: absolute;
        top: -35px;
        left: 0;
        color: white;        
        background: ${style.tooltip.background};
        width: max-content;
        padding: 5px;
        border-radius: 5px;
        background-clip: padding-box;        
    }
    // arrow
    :hover::before {
        content: '';
        border-top: 10px solid ${style.tooltip.background};
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 25px solid transparent;
        position: absolute;
        top: -5px;
        left: 9px;
    }
`

export default Container