1

I have trying to position my popover based on the left and right position of a div but I am not able to do that.

The bottom image shows the problem I am facing

Popover going behind the right div

The code I have for the popover is as follows:

$('a[rel=popover]').popover({
                html: true,
                trigger: 'hover',
                trigger: 'click',
                placement: 'right',
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title" style="display:none;"></h3><div class="popover-content"><p></p></div></div></div>',
                content: function () { return '<img style="width:250px" src="' + $(this).data('img') + '" />'; }
            });

I tried using the placement as a function as suggested in the following links:

https://stackoverflow.com/questions/9956958/changing-the-position-of-bootstrap-popovers-based-on-the-popovers-x-position-in‏

Is it possible to change the position of Bootstrap popovers based on screen width?

These didn't work.

IMPORTANT The image shown to you is in a fancybox

Cœur
  • 37,241
  • 25
  • 195
  • 267
user3328402
  • 47
  • 2
  • 3
  • 12
  • How about using placement `auto` or `auto right`? – DavidG Jun 30 '15 at 13:03
  • what kind of fancybox? iframe? – Julo0sS Jun 30 '15 at 13:04
  • @DavidG Placement auto right is also not working have tried it. It is showing all the elements on the left and auto left showing all the elements to the right. – user3328402 Jun 30 '15 at 13:07
  • @Julo0sS Iframe Fancybox – user3328402 Jun 30 '15 at 13:07
  • tbh, I don't understand exactly what you're tryin to do... can you tell us, with details, what has to be displayed, & where... thx – Julo0sS Jun 30 '15 at 13:08
  • Could you create a jsfiddle, http://jsfiddle.net – dreamweiver Jun 30 '15 at 13:09
  • your popover code is into the "global file" or into the "iframe" file code? YES : Fiddle would be great to see what's happening.... – Julo0sS Jun 30 '15 at 13:09
  • @dreamweiver http://www.swiss-nl.performamanager.nl/boxsprings/van-der-valk-hotelboxspring-ariana Open this link Click on the six points mentioned on the right 1. Matt ....... A fancy box would open... Click the boxes untill you reach step 3. At step 3 If you hover over the colors you will find the behaviour I am asking for. – user3328402 Jun 30 '15 at 13:16
  • can you tell me which is the script, which has the above `popover` js script from your site, im not able to find it. `productDetails.js` script has the above code but its commented – dreamweiver Jun 30 '15 at 13:32
  • @dreamweiver It is in the partial view for the fancybox and that has been referenced in the partial and not in the view you are checking. boxspringQuickview.js – user3328402 Jun 30 '15 at 13:39

0 Answers0