JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<p><a href="#" title="A short title" id="link1">Example #1 - Switching the title attribute</a><p>
    <p><a href="http://google.com" 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'; }
        
        $(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();
    $('#link2').swapAttr('href');
});