<commit_before>.hint {
    display: inline;
    position: relative;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.hint:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(data-hint);
    left: 20%;
    padding: 9px 16px;
    position: absolute;
    z-index: 1000000;
    width: 220px;
    font-size: 14px;
    font-weight: normal;
}

.hint:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
<commit_msg>make it responsive, fix #3<commit_after>.hint {
    display: inline;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.hint:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    transform: translateY(26px);
    color: #fff;
    content: attr(data-hint);
    padding: 9px 16px;
    position: absolute;
    z-index: 1000000;
    font-size: 14px;
    font-weight: normal;
}

.hint:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 0 6px 6px 6px;
    transform: translateY(20px) translateX(8px);
    content: "";
    position: absolute;
    z-index: 99;
}

@media screen and (max-width: 499px) {
    .hint:hover:after {
        transform: translateY(26px);
        left: 0px;
        width: 91%;
    }
}

@media screen and (min-width: 500px) {
    .hint:hover:after {
        transform: translateY(26px);
        left: 0px;
        width: 220px;
    }
    .hint {
        position: relative;
    }
}

{'fraction_non_alphanumeric': 0.13738601823708207, 'fraction_numerical': 0.05714285714285714, 'mean_word_length': 2.517094017094017, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4691261', 'n_tokens_mistral': 666, 'n_tokens_neox': 580, 'n_words': 140}