title: How to make Bootstrap 4 popovers scrollable
body: <p>I saw another question like this, but the answer didn't work for me and I'm not sure why. Why isn't my popover content scrolling when over 50px? Also side question: in my variable 'a', my newlines aren't working within the popover. Anyone know why?</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>var a = "hello \n hello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \n hello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \nhello \n";
  $(function() {
    $('[data-toggle="popover"]').popover()
  });
  
  $("#button1").attr('data-content', a);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.popover-content {
    height: 10px;
    overflow-y: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;button id="button1" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="Hello"&gt;Click to toggle popover&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>