JSFiddle - React, Tailwind, and code Playground

HTML

<div> <span id="hover_to_show_text">Hover here to show hidden text</span>
 <span id="hidden_text" style="display:none">Hidden text</span>
 <span id="btn">Button</span>

</div>

CSS

#btn {
    border: 1px dotted green;
    padding 4px;
}

JavaScript

$("#hover_to_show_text").mouseenter(function () {
    $('#hidden_text').show();
});
$("#hover_to_show_text").mouseleave(function () {
    $('#hidden_text').hide();
});

// Just triggering the click event will not work if no
// click handler is provided.
// So create one first
$("#btn").on('click', function () {

    // trigger the mouse enter event 
    $("#hover_to_show_text").trigger('mouseenter');
    
    setTimeout(function () {
        $("#hover_to_show_text").trigger('mouseleave');
    }, 1500);

});