JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hover-area"></div>
<br />
<input type="button" value="click to bind" />
<div id="tip">tooltip</div>

CSS

#tip {
 position: absolute;
 display: none; 
 z-index : 500;  
 background: #fff;
 border: 1px solid black;
    color: black;
}

#hover-area {
    background: #f00;
    width: 100px;
    height: 100px;
    margin 20px;
}

JavaScript

var tip = $('#tip'),
    area = $('#hover-area'),
    button = $('input');

function bind() {
  area
    .text('hover over me for tooltip') 
    .hover(function(e) { tip.show(); }, function(e) { tip.hide(); })
    .mousemove(function(e) { tip.css({top: e.pageY + 12, left: e.pageX + 12 }); });    
    button.val('click to unbind');
}

function unbind() {
  button.val('click to bind');  
  area.text('').unbind('mouseenter mouseleave mouseover mouseout');   
}

var i =1;
button.click(function () { i%2? bind() : unbind(); i++;  });