JSFiddle - React, Tailwind, and code Playground

HTML

<p><a href="#" title="A short title" id="link1">Example #1 - Switching the title attribute</a><p>
<p><a href="#" rel="A short rel" id="link2">Example #2 - Switching the rel attribute</a></p>
<p><a href="#" title="">Example #3 - Empty title attribute isn't switched</a></p>
<p><a href="#" title="This is a much, much longer title attribute then the default text">Example #4 - Longer title attribute</a></p>

CSS

a {display:inline-block;}

JavaScript

// jQuery Plugin
(function($){

    // Swap text with any attribute
    $.fn.swapAttr = function(attribute) {
        
        if (!attribute) { var attribute = 'title'; }
        
        return this.each(function(){
        
            $(this).hover(function(){
                
                var $this           = $(this);
                var text            = $this.text();
                var attributeValue  = $this.attr(attribute);
                var defaultWidth    = $this.width();
                
                if (attributeValue) {
                    $this.text(attributeValue).attr('data-defaultText', text);
                    
                    if(defaultWidth > $this.width()) {
                        $this.width(defaultWidth);
                    }
                }
            
            },function(){
                
                var $this           = $(this);
                var defaultText     = $this.attr('data-defaultText');
                
                $this.text(defaultText).removeAttr('data-defaultText').width('auto');
            });
        
        });
    };

})(jQuery);


$(document).ready(function(){
    $('a').swapAttr().css({'color':'#ccc'});
    $('#link2').swapAttr('rel');
});