How to make Bootstrap popover appears once on page load

Question

I want to make bootstrap popover should appears once on the page load over a button (just to use it as an instruction) and after clicking the button it should get destroyed.

I want to popover on the button and gets user's attention every time they visit my page and drag their attention to click on it if they are new visitors.

I have made following code, the popovers appears on the page load but it works just like normal popover afterwards it doesn't get destroyed when i click button.

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h1>Hello World</h1>

            <p>Click on button to see Popover</p>

            <button type="button" id="example" class="btn btn-primary" rel="popover"
                data-content="Check this new option when you visit our website to catch the latest news!"
                data-original-title="This is new feature">pop
            </button>                      
        </div>
    </div>
</div>

JS:

function destroyNew(){
    $('#example').popover('destroy');
}

$(window).load(function () {
    $("#example").popover('show');
});

I have also modified the JS and tried in this way:

JS:

$("#example").on('click', function () {
        $('#example').popover('destroy');
    }
});

$(window).load(function () {
        $("#example").popover('show');
});

The above code doesn't make the popover at all, not on the page load neither normally.

I want some experts to help me out, Thanks in advance.

Answer 1

This works for me. Later you can hide it after click. You can check jsfiddle here

$(function() { 

    $("#example").popover('show');

    $("#example").on('click', function () {
        $('#example').popover('destroy');
    });
 });