title: How to preview my Stack Overflow profile in a div on hover
body: <p>Here I have a Bootstrap popover where I put a <strong>iframe</strong> to show my SO profile as a preview but HTTP response header is not allowing to render it on my local machine but its working fine here. Any suggestions would be helpful</p>
  
  <p><a href="https://i.stack.imgur.com/HxJ7s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HxJ7s.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $('[rel="popover"]').popover();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;a href="#" id="blob2" class="btn large primary" data-trigger="hover"  rel="popover" data-html="true" data-content='&lt;iframe frameborder="0" scrolling="no" height="420" width="420"
  src="http://stackoverflow.com/users/5336321/hitesh-misro"&gt;&lt;/iframe&gt;' style="margin-top: 100px"&gt;hover for popover&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>