changing bootstrap popover color programmatically

Question

I tried to create a pop-over programmatically on divs that were created programmatically - that is working fine... But when I try to change the color of the text inside the pop-over I meet a road block here is my code:

html:

<input type="text" class="inp"/>
<input type="button" class="but" value="press me"/>
<div id="append_area">
</div>

js:

$(".but").click(function(){

       var divv = $("<div class='append'>"+$(".inp").val()+"</div>");
      $("#append_area").append(divv);
          $(divv).popover({
              html:true,
              content:"<div class='pop'>"+$(".inp").val()+"</div>",
              placement :"right",
              trigger:"hover"
          });
          if($(".inp").val()=="red"){
             $(".pop").css("color","red");
            }


      });

thanks a lot to the helpers...

jsfiddle example:here

Answer 1

Check this fiddle

You need to add Callback to bootstrap popover, refer this link

js:

var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
    showPopover.call(this);
    if (this.options.showCallback) {
        this.options.showCallback.call(this);
    }
}

$(".but").click(function(){

           var divv = $("<div class='append'>"+$(".inp").val()+"</div>");
          $("#append_area").append(divv);
              $(divv).popover({
                  html:true,
                  content:"<div class='pop'>"+$(".inp").val()+"</div>",
                  placement :"right",
                  trigger:"hover",
                  showCallback: function(){
                   if($(".inp").val()=="red"){
                     // alert("dcd");
                     $(".pop").css("color","red");
                    }
                  }
              });



          });