title: How to set toolbar inside element while hovering that HTML element using JQuery?
body: <pre><code>$('body').on('mouseover mouseout', '*:not(.printToolBar)', function (e) {
      if (this === e.target) {
          (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
      }
  });
  
  function setMenuBox (obj){
      $(obj).wrap('&lt;div class="toolBarWrapper" style="position:relative;"/&gt;');
      $(".toolBarWrapper").append($('.printToolBar'));
  }
  
  function removeMenuBox (obj){
      $(".toolBarWrapper").remove('.printToolBar');
      $(obj).unwrap();
  }
  
  function createToolBar(){
      var ul = $("&lt;ul&gt;").attr({
          'class': "printToolBar",
          style: "border: 1px solid #ff0000; position:absolute; top:0 ; right: 0;"
      });
      var li = $("&lt;li&gt;").attr({
          'className': "printToolBarList"
      }).text('Print');
      var printLi = li.clone().attr({
          id: "print"
      }).on('click',function(e){ 
          console.log(this);
      });     
      ul.append(printLi).appendTo("body");
  };
  createToolBar();
  </code></pre>
  
  <p>This is what I am trying to do set the menubar with every HTML element, but I am unable to detach the event on menubar it self, which is causing problem by throwing some JS error, is there any other way to achieve the same?</p>