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(){
    // optionally remove bindings
    $('footer p').tooltip('destroy');
    
    window.backup = $('footer').clone();
    $('footer p').remove();
})

$('#restore').click(function(){
    $('footer').replaceWith(window.backup);
    window.backup.find("p").tooltip();
});