Pure CSS tone indicators.

tones.sass

$tones: "joke" "/j" "joking", "half-joke" "/hj" "half-joking", "sarcasm" "/s" "sarcastic", "genuine" "/g" "genuine", "serious" "/srs" "serious", "non-serious" "/nsrs" "non-serious", "positive" "/pos" "positive connotation", "neutral" "/neu" "neutral connotation", "negative" "/neg" "negative connotation", "copypasta" "/c" "copypasta", "lyrics" "/ly" "lyrics", "light-hearted" "/lh" "light-hearted", "not-mad" "/nm" "not mad", "nobody-here" "/nbh" "nobody here", "rhetorical" "/rh" "rhetorical question", "teasing" "/t" "teasing", "metaphore" "/m" "metaphorically", "literal" "/li" "literally", "hyperbole" "/hyp" "hyperbole", "fake" "/f" "fake"

span[data-tone]
    display: inline
    position: relative
    &:before
        display: inline-block
        width: min-content
        padding: 0 1ch
        background: hsl(0,0%,15%)
        border-radius: 100vw
    &:after
        position: absolute
        top: -1ch
        left: 50%
        transform: translate(-50%, calc(-100%))

        display: inline-block
        white-space: nowrap
        background: hsl(0,0%,80%)
        color: hsl(0,0%,10%)
        padding: 0.2ch 1ch
        border-radius: 0.2rem

        opacity: 0
        transition: 200ms ease-in-out opacity
    &:hover:after
        opacity: 1

    @each $id, $short, $desc in $tones
        &[data-tone="#{$id}"]:before
            content: $short
        &[data-tone="#{$id}"]:after
            content: $desc

Use them as <span data-tone="joke"></span>.
Point: avoids having to remember abbr. for both user and readers
Some are missing as I likely won't use them for my application, but they're easy enough to extend.