How to make Bootstrap 4 popovers scrollable

Question

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?

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);

.popover-content {
  height: 10px;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<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"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<button id="button1" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="Hello">Click to toggle popover</button>

Answer 1

You're targeting the wrong class. The correct class is popover-body:

.popover-body {
    height: 50px;
    overflow-y: auto;
    white-space:pre-wrap;
}

https://jsfiddle.net/gx27dbv3/