JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" title="Shorter title text">This is the original text, which is longer</a>

CSS

a:hover 
{ 
    color:red;
    content: attr(title);
}

JavaScript

(function($){

    $.fn.txtSwap = function() {
        var $this = $(this);
        var title = $this.attr('title');
        var text  = $this.text(); 
        var origWidth = $this.width();
        
        $this.hover(function(){
            $this.text(title).attr('rel', text).removeAttr('title');
            if($this.width() < origWidth){
                $this.css({'display' : 'inline-block', 'width' : origWidth+'px'});   
            }
        },function(){
            $this.text(text).attr('title', title).removeAttr('rel');
            $this.css({'display' : 'inline', 'width' : 'auto'});
        });
    };
    
})(jQuery);


$(document).ready(function(){
    //$('a').txtSwap();
});