Update Bootstrap Popover Content

Question

I'm trying to create an indicator that pops over whenever the input text is focused. The content of the popover is html.

JS

$('.validate').popover({
    html : true,
    trigger : 'focus',
    content : function() {
        return $('#popover-content').html();
    }
});

On Change

$('.validate').change(function() {
    var eval_me = $('.validate').val();
    $('#sample').html(eval_me);
});

The HTML

    <div class="input-prepend">
        <span class="add-on"><i class="icon-lock"></i></span><input type="text" class="validate" data-placement='right' title="Hello World">
    </div>

    <div id="popover-content" style="display: none">
        <div class="row"><label id="sample">This is your div content</label></div>
    </div>

The content inside the label gets updated, but the popover isn't. Dismissing the popover and focusing the input text again (to open it) shows the updated label.

Any help is appreciated :)

Answer 1

Two things: the change event doesn't fire until the input loses focus, you probably want to bind the update code to the keyup event. Second, though that code is updating your sample div, the popover is just getting that data when the popover is triggered; if you want to update the popover's sample div, you need to handle that as part of the keyup event handler. Try changing that event handler like so:

$('.validate').keyup(function() {
  var eval_me = $('.validate').val();
  $('#sample').html(eval_me);
  $('.popover #sample').html(eval_me);
});

and you should be good. Check the fiddle .

Edit : actually playing with it a little, it seems like keyup is a better trigger than keypress , otherwise the update trails the input by one char, but I'm probably just missing something there. Changed the code above accordingly.