title: Add events back after removing them with off()
body: <p>I have a feature that displays/hides a hoverbox below an element on mouseenter/mouseleave, and over the same element if the user clicks the element. </p>
  
  <p>I've managed to remove the mouseenter/mouseleave events with the click event, but can't figure a way to add them back if the user clicks to dismiss the hoverbox. </p>
  
  <p>How can I get the mouseenter/mouseleave events back when the user clicks on the hoverbox to dismiss it? </p>
  
  <p><a href="https://jsfiddle.net/n2fole00/2hn906kg/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>// add hoverbox on click
  $('.icon').on('click', function() {
    var $iconPosition = $(this).position(); // position on clicked icon
    //console.log($iconPosition)
    // set hoverbox position based on current icon position and make visible
    $('.hoverbox').offset({
      top: $iconPosition.top + 10,
      left: $iconPosition.left
    }).css({
      "display": "block"
    });
  
    $('.icon').off('mouseenter mouseleave'); // remove mouseenter mouseleave functionality 
  });
  
  // remove hoverbox on click
  $('.hoverbox').on('click', function() {
    // reset offset or it will accumulate after each click
    $('.hoverbox').offset({
      top: 0,
      left: 0
    }).css({
      "display": "none"
    });
  });
  
  // add hoverbox on mouseenter
  $('.icon').on('mouseenter', function() {
    var $iconPosition = $(this).position(); // position on clicked icon
    //console.log($iconPosition)
    // set hoverbox position based on current icon position and make visible
    $('.hoverbox').offset({
      top: $iconPosition.top + 130,
      left: $iconPosition.left
    }).css({
      "display": "block"
    });
  });
  
  // remove hoverbox on mouseleave
  $('.icon').on('mouseleave', function() {
    // reset offset or it will accumulate after each click
    $('.hoverbox').offset({
      top: 0,
      left: 0
    }).css({
      "display": "none"
    });
  });
  </code></pre>