backdropPadding not taken in account for tip position

[jbarbede]

Hi,

I am using the plugin (and it's doing really great its job :-)) but I have a little problem with backdropPadding property.

It correctly adds the padding for backdropped element but the tip is incorrectly positioned.

I added a 20px backdrop padding and it is exactly the number of pixels missing to popover CSS top property.

I attached an image that shows my problem.

[mitchkramez]

I worked around this with by adding the lines after the double line break here around line 557:

Tour.prototype._reposition = function($tip, step) {
      var offsetBottom, offsetHeight, offsetRight, offsetWidth, originalLeft, originalTop, tipOffset;
      offsetWidth = $tip[0].offsetWidth;
      offsetHeight = $tip[0].offsetHeight;
      tipOffset = $tip.offset();
      originalLeft = tipOffset.left;
      originalTop = tipOffset.top;

    //this here!
      if (step.placement === 'top') {
          tipOffset.top = tipOffset.top - parseInt(this._options.backdropPadding);
      } else if(step.placement === 'bottom') {
          tipOffset.top = tipOffset.top + parseInt(this._options.backdropPadding);
      }

obviously this only covers top and bottom, any might not be the safest, but it's working for me :)

[jbarbede]

Thanks @mitchkramez, I implemented something similar by the way:

Tour.prototype._reposition = function($tip, step) {
      var offsetBottom, offsetHeight, offsetRight, offsetWidth, originalLeft, originalTop, tipOffset;
      offsetWidth = $tip[0].offsetWidth;
      offsetHeight = $tip[0].offsetHeight;
      tipOffset = $tip.offset();
      originalLeft = tipOffset.left;
      originalTop = tipOffset.top;
      if (step.placement === 'bottom') {
        tipOffset.top += step.backdropPadding;
      } else if (step.placement === 'top') {
        tipOffset.top -= step.backdropPadding;
      } else if (step.placement === 'right') {
        tipOffset.left += step.backdropPadding;
      } else {
        tipOffset.left -= step.backdropPadding;
      }
      offsetBottom = $(document).outerHeight() - tipOffset.top - $tip.outerHeight();

[madn3ss75]

The last solution is working only if you use an integer padding (the same for each side). If you are using an object to specify top, bottom, left or right padding this code won't work.

Use this if you want to cover both cases:

      if(typeof step.backdropPadding === 'object'){
        if (step.placement === 'bottom') {
          tipOffset.top += step.backdropPadding.bottom;
        } else if (step.placement === 'top') {
          tipOffset.top -= step.backdropPadding.top;
        } else if (step.placement === 'right') {
          tipOffset.left += step.backdropPadding.right;
        } else {
          tipOffset.left -= step.backdropPadding.left;
        }
      } else {
        if (step.placement === 'bottom') {
          tipOffset.top += step.backdropPadding;
        } else if (step.placement === 'top') {
          tipOffset.top -= step.backdropPadding;
        } else if (step.placement === 'right') {
          tipOffset.left += step.backdropPadding;
        } else {
          tipOffset.left -= step.backdropPadding;
        }
      }

[jslim89]

I'm using v0.12.0 now, still having this issue. @madn3ss75 where to add this code? is it possible to add update the position in onShow()?

---

Edit

I've found a solution

onShown: function (self) {
    const margin = '20px'; // if the backdropPadding is 10, then set the margin to double
    if ($('.tour-name').hasClass('bottom')) {
        $('.tour-name').css('margin-top', margin);
    } else if ($('.tour-name').hasClass('left')) {
        $('.tour-name').css('margin-right', margin);
    }
    // add more condition
    self.redraw();
}