having issue with styling on popover show and hide

Question

html

<a class="popper btn" rel="popover" data-toggle="popover"><h3 class="gv layout">Layout Plan</h3> </a>
<div class="popper-content hide"> 
  <a href="pdf/layout1.pdf" target="_blank"><img src="images/layout1.jpg" class="btn"/></a> 
  <a href="pdf/layout2.pdf" target="_blank"><img src="images/layout2.jpg" class="btn"/></a> 
  <a href="pdf/layout3.pdf" target="_blank"><img src="images/layout3.jpg" class="btn"/></a> 
</div>

script:

$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
    return $(this).next('.popper-content').html();
}
});

i want this to execute on popover show, thanks in advance can any find what is the problem here,

script:

$popover.on("show", function(e) {
    $("#transbg").css("padding-bottom","2600px");
});

the below ref code works fine in fiddle but not with my code

   var $popover = $(".poper").popover({
    trigger: "click"
}).click(function(e) {
    e.$("#transbg").css("padding-bottom","260px"); 
});

$popover.on("hide", function(e) {
    $("#transbg").css("padding-bottom","50px");
});

can you create jsfiddle which all relavant code which is not working for you, http://jsfiddle.net — dreamweiver, Feb 19 '16 at 05:45

shu · Accepted Answer · 2016-02-19T06:28:33.697

1

The popover show event syntax is not correct,Can you try the following

HTML

<a class="poper btn" rel="popover" data-toggle="popover">
    <h3 class="gv layout">
        Layout Plan</h3>
</a>
<div class="popper-content hide">
    html
</div>

JS

var abc = $('.poper').popover({
    placement: 'bottom',
    container: 'body',
    trigger: 'hover',
    html: true,
    content: function () {
       return $(this).next('.popper-content').html();
    }
});

abc.on("shown.bs.popover", function (e) {
  console.log("popover shown");
});

abc.on("hidden.bs.popover", function (e) {
  console.log("popover hidden");
});

Fiddler

Please refer this link regarding bootstrap popover

edited Feb 19 '16 at 06:28

answered Feb 19 '16 at 04:32

shu

1,938
10
19

hi @shu i tried the above code it doesnt trigger the popover – sasi jj Feb 19 '16 at 04:40
hi used this ref code from fiddle it works fine in fiddle but not in my code – sasi jj Feb 19 '16 at 04:42
@sasijj can you please check the classname it's `poper` or `popper`,I have updated the answer also.please check – shu Feb 19 '16 at 04:49
@sasijj which version of bootstrap you are using – shu Feb 19 '16 at 04:53
bootstrap v 3.3.1 its poper am sure it works fine but the proble is i cant call a fuction on popover show and hide, even i tried bootstrap event listener style shown.bs.popover – sasi jj Feb 19 '16 at 05:12
@sasijj `abc.on("shown.bs.popover", function (e) { ` should work for you.put a ` console.log` and check – shu Feb 19 '16 at 05:14
can you please share the altered code with me because i cant able check it with console it throws e.$ is not a function repeatedly. – sasi jj Feb 19 '16 at 05:25
@sasijj I have updated the answer please check.In the cnsole you can check events are firing or not – shu Feb 19 '16 at 05:47
@sasijj I have added fiddler,it's working fine.Have you added necessary JS file and CSS file.Bootstarp js and css file are propely added – shu Feb 19 '16 at 06:29
ya i added all the files can you give me the fiddle link – sasi jj Feb 19 '16 at 07:46
thanks a lot i dont know what is the problem but when i replaced the html code afterwards it works fine – sasi jj Feb 20 '16 at 07:31

having issue with styling on popover show and hide

1 Answers1