JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" rel="link1 text">link1</a>
<a href="#" rel="link2 text">link2</a>
<a href="#" rel="link3 text">link3</a>

<div>rgwerger</div>

CSS

div {
    clear: both;
    display: none;
    background: #ccc;
    padding: 10px;
}
a { float: left; margin-right: 20px; }

JavaScript

var __TIMER = null;

$("a").live('mouseenter', function(){
    clearTimeout(__TIMER);
    if ($("div").css('display')=='none'){
        
        $("div").html($(this).attr("rel"));
        $("div").fadeIn('fast');
        
    } else {
        $("div").html($(this).attr("rel"));
    }
    
})

$("a").live('mouseleave', function(){ 
    
    __TIMER = setTimeout(function(){
        $("div").fadeOut('fast');
    }, 1000);
    
});