Всплывающее окно Bootstrap не работает при выводе в HTML

Всплывающее окно должно быть инициировано после при нажатии кнопки. Готовый документ загрузится только один раз при загрузке страницы.

$("button").click(function() {
   $("p").html('<a href = "#" title = "Header" data-toggle = "popover" data-trigger = "hover" data-content = "Some content">Hover over me</a>');
    $('[data-toggle = "popover"]').popover();   
});

https://jsfiddle.net/fLcz90q3/

$('[data-toggle = "popover"]').popover(); вызывает этот код после обновления html в теге <p>. вы должны повторно инициировать после добавления / перезаписи html. Вы должны добавить код выше внутри события щелчка.

Код внутри $(document).ready() будет работать только при загрузке страницы. Чтобы достичь динамически созданного элемента, вы должны инициировать его после создания / обновления элемента.

$( "button" ).click(function() {
    $("p").html('<a href = "#" title = "hello, this is title" data-toggle = "popover" data-trigger = "hover" data-content = "Some content">Hover over me</a>');
    $('[data-toggle = "popover"]').popover();
});

$(document).ready(function(){
    $('[data-toggle = "popover"]').popover();   
});

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class = "container">
    <p>Click the button to add popover</p>
    <button class = "btn">button</button>
</div>