Updating Bootstrap Popover Content

Question

I am trying to create an indicator that pops up whenever input text is entered. The content of the popover is html.

Js

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

On

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

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 is updated, but the popover is not. Dropping 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 does not fire until the input loses focus, you probably want to bind the update code to the keyup event. Secondly, although this code updates your div sample , popover just gets this data when popover fires; if you want to update the popover sample div, you need to handle this as part of the keyup event keyup . Try changing this event handler as follows:

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

and you have to be good. Check out the fiddle .

Edit : Actually, playing with it a bit, it seems that keyup is a better trigger than keypress , otherwise the update keeps track of input with one char, but I'm probably just missing something there. Accordingly, I changed the code.