JSFiddle - React, Tailwind, and code Playground

HTML

<p class="tweet1">First long text displayed fully on hover</p>

<p class="tweet1">Second long text displayed fully on hover</p>

<p class="tweet1">Third long text displayed fully on hover</p>

CSS

.tweet1 {
    overflow:hidden;
    white-space:nowrap;
    width:120px;
}
.hiding {
    text-overflow:ellipsis;
}

JavaScript

/*var tweet = document.getElementById('tweet1');
tweet.id = 'tweet1';
tweet.className = 'hiding';*/

$('.tweet1').addClass('hiding');

var slide_timer,
    slide = function (element) {
        element.scrollLeft += 2;
        if (element.scrollLeft < element.scrollWidth) {
            slide_timer = setTimeout(function(){slide(element);}, 40);
        }
            
    };


$('.tweet1').mouseover(function () {        
    clearTimeout(slide_timer);
        $(this).removeClass('hiding');
        slide(this);
    });

$('.tweet1').mouseout(function () {        
    clearTimeout(slide_timer);
        $(this).addClass('hiding');
        $(this)[0].scrollLeft = 0;
    });


/*tweet.onmouseover = tweet.onmouseout = function (e) {
    e = e || window.event;
    e = e.type === 'mouseover';
    clearTimeout(slide_timer);
    tweet.className = e ? '' : 'hiding';
    if (e) {
        slide();
    } else {
        tweet.scrollLeft = 0;
    }
};*/