JSFiddle - React, Tailwind, and code Playground

by gchoken

HTML

<div>
<div id="box">hover</div>

<div class="tip"> I am tip ! <div>

    <div class="tip"> <a href="http:code-cocktail.in">Clcik me</a> ! <div>
        </div>

CSS

#box{ width:100px; height;200px; display:block; background-color:yellow;}

.tip{ display:none;background-color:red;}

JavaScript

$(function(){

    $(document).on({
        mouseenter: function(event) {
            $('.tip').show();
            
        },
        mouseleave: function(event) {
             
          
            if( $('.tip').find('a').length === 0){
            $('.tip').hide();
            }
            else{
                                         $('.tip').mouseleave(function(event) {
                    $('.tip').hide();
                });
            }
            
        }
    },'#box');

});