JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<a id="user1">User 1
    <span class="info">
        <br>
        Here's some info to show later
    </span>
</a>

CSS

.info {
    display:none;
}

JavaScript

function displayinfo( obj ){
    obj
        .find(".info")
        .show();
}
function hideinfo( obj ){
    obj
        .find(".info")
        .hide();
}
$("a[id^='user']")
    .on("mouseenter", function(){
        displayinfo( $(this) );
    })
    .on("mouseleave", function(){
        hideinfo( $(this) );
    })
    .on("click", function(){
        $(this).off("mouseleave");
    });