JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="mybutton"><i class="icon icon-heart"></i> 1</button>


<div id="likebox2" class="likebox" style="display: none;">
    <div class="likebox-header">1 пользователю это понравилось</div>
    <a href="http://localhost/2" style="float: left; padding: 5px; cursor: pointer;" title="@jamesbraga">
        <img alt="image" src="http://designbump.com/wp-content/uploads/2014/01/best-free-flat-icons-001.jpg" height="32px" width="32px" />
    </a>
</div>

JavaScript

$('#mybutton').on('mouseenter', function(){
    $('#likebox2').show()
}).on('mouseleave', function(){
    var hideTimer = setTimeout(function(){
        $('#likebox2').hide()
    }, 700)
    $('#likebox2').on('mouseenter', function(){
        clearInterval(hideTimer)
    }).on('mouseleave', function(){
        $(this).hide()
    })
})