JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<br><br><br><br><br>

Type in a "@" in the text area<br>

<textarea></textarea>

CSS

#tooltip {
    position: absolute;
    border: 1px solid #333;
    background: #f7f5d1;
    padding: 2px 5px;
    color: #333;
    display: none;
}

JavaScript

var t, makeTooltip = function(txt) {

    var pos = $('textarea').position();
    clearTimeout(t);
    $('#tooltip').remove();
    $("body").append('<p id="tooltip">' + txt + '</p>');
    $('#tooltip')
        .css({
            top : pos.top - 30,
            left: pos.left
        })
        .fadeIn("fast");

    t = setTimeout(function() {
        $('#tooltip').fadeOut(300, function() {
            $(this).remove();
        });
    }, 4000);

};

$('textarea').keyup(function(e) {
    switch (e.which) {
    // @ symbol
    case 50:
        makeTooltip('you typed in an at symbol');
        break;
    // # mark
    case 51:
        makeTooltip('ooo a pretty hash mark');
        break;
    }
});