Changing the data-content of popover dynamically using Jquery / Javascript

Question

I am using ASP.NET MVC with Bootstrap, Jquery, Entity Framework...

I have applied the popover effect on button that shows me the respected data coming from partial view as a result on hover.

The problem I am facing is I have to click twice to get updated text or popover result.

Why I just don't know please look at the sample I have provided here and help me. Please someone who knows.

HTML:

<button class="btn btn-success" type="button" data-toggle="popover"
data-trigger="focus" data-placement="top" title="Contact Detail"
id="btnContactInfo" data-html="true">
<i class="fa fa-info"></i></button>

Javascript:

var popover = $('#btnContactInfo').popover({
                     trigger: 'manual'
                 }).popover('show');
                 $('#btnContactInfo')
.popover().on('show.bs.popover', function (e) {
$("#po").html(htmldata);
popover.attr('data-content', $("#po").html());
});

Answer 1

Ohhhh I just doing wrong way. Actually I have to do it like this by using below code and some analysis as well , might be helpful for someone:

HTML is same as described in Question.

Javascript: We hover of particular HTML control / button function:

$("#btnContactInfo").hover(function () {
    $("#btnContactInfo").
    attr('data-content', htmlcode)
    .popover(hide)
    .popover('fixTitle')
    .popover('show');
    });

I have just use this answer that has solution for tooltip with the same problem and applied to popover the same with using popover's property.