JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <body>
    
      <p id="destroy">Destroy</p>
      <p id="restore">Restore</p>
<!-- 

first hover footer's p (the lorem ipsum text) to check tooltip
than click Destroy
than click Restore - it should bring back Lorem ipsum text BUT NOT THE TOOLTIP
 -->      
      
      

      <footer>
          <p data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Lorem ipsum</p>
      </footer>
  </body>

JavaScript

$('footer p').tooltip();

$('#destroy').click(function(){
    var $footer_p = $('footer p');
    window.backup = $footer_p;
    $footer_p.detach();
})

$('#restore').click(function(){
    var $footer = $('footer');
    $footer.append(window.backup);
});