CODEWITHSUNDEEP
.netasp.net-mvc-3twitter-bootstrappopover
rout0802
rout0802

Reputation: 147

Twitter Bootstrap popover doesn't showup

I am posting this question because, in my search, I didn't find anything that is similar to my situation. I tried many things looking at all other solutions but nothing work. Here is my situation:

I have a textarea which I create dynamically using handlebars.js template:

{{#datacontext}}
<textarea rows="10" cols="41" id="selector" rel="popover" 
          data-content="{{data_value}}" data-html="true" 
          style="color:Black;background:none;" class="uneditable-textarea"   
          readonly="true" >{{data_value}}</textarea>
{{/datacontext}}

Then in jQuery I have all these below codes but nothing works. I am pretty sure I have popover in my bootstrap.js script:

     $('body').popover({
            selector: '[rel=popover]',
            placement: 'left'
        });

 $('#selector').popover({ trigger: 'hover'
                            , placement: 'left'
                            , html: true
                            , content: function () {
                                return $("#poContent").html();
                            }
    });

    $("[rel=popover]").popover({ placement: 'left' });

    $('[rel=popover]').popover({
        html: true,
        content: function () {
            return $('#poContent').html();
        }
    });

I tried putting the content in #poConten t as well.

I would appreciate your help in this regard.

Upvotes: 1

Views: 369

Answers (1)

YD1m
YD1m

Reputation: 5895

Seems like your js templater works after document ready and after your script run. For debug try run it after document ready and some delay (using setTimeot()):

$(document).ready(function() {

setTimeout(function(){
$('body').popover({
            selector: '[rel=popover]',
            placement: 'left'
        });

 $('#selector').popover({ trigger: 'hover'
                            , placement: 'left'
                            , html: true
                            , content: function () {
                                return $("#poContent").html();
                            }
    });

    $("[rel=popover]").popover({ placement: 'left' });

    $('[rel=popover]').popover({
        html: true,
        content: function () {
            return $('#poContent').html();
        }
    });
 }, 2000); // 2 sec delay 

}) ;

Upvotes: 1

Related Questions