JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="dimoption">Text
<div id="msgmaxdim" class="description"> Here is the big fat description box</div>
</div>

CSS

.tiptext {
    background:#ccc;
    border: 1px #333 solid;
    padding:5px;
    width:100px;
}
.description {
    display:none;
    /* position:absolute; */
    border:1px solid #000;
    width:400px;
    height:40px;
    background-color: white;
}

JavaScript

var mouseX;
var mouseY;
$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
});  


$(".dimoption").click(function(){
 alert('fire');
 var $maxdim = $("#msgmaxdim");
 	$maxdim.css({'top':mouseY-400,'left':mouseX}).fadeIn('slow');
  setTimeout(function() {
        $maxdim.fadeOut('slow');
    }, 3000);
  
});