[Feature request] Add highlight padding option

[codemunkie15]

Is it possible to add an option to specify an amount of padding on the highlight? Currently the highlight uses the bounds of the element but I would like to add a small gap so the highlight is bigger than the element.

Something like this should do it?

var padding = step.backdropOptions.highlightPadding;
var offset = $(step.element).offset();
offset.top -= padding;
offset.left -= padding;
$(DOMID_HIGHLIGHT).width($(step.element).outerWidth() + (padding * 2)).height($(step.element).outerHeight() + (padding * 2)).offset(offset);

Thanks

[IGreatlyDislikeJavascript]

A couple of ways to do this, but you could use the same approach that I explained here: https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist/issues/48#issuecomment-588400223 , except instead of using it per-step, use it as a global option. That way you can completely control the highlight appearance across your tour.

Alternatively you can alter the CSS for the highlight class, or make the change in the onShown callback. Does that help?

[adriangibbons]

@codemunkie15 I hacked at the CSS and JS for the result I wanted: bootstrap-tourist.css Added border-radius: 8px; to .tour-highlight

bootstrap-tourist.js $(DOMID_HIGHLIGHT).width($(step.element).outerWidth()).height($(step.element).outerHeight()).offset($(step.element).offset()); // Around line 1825 Became $(DOMID_HIGHLIGHT).width($(step.element).outerWidth()+16).height($(step.element).outerHeight()+16).offset({ top: $(step.element).offset().top-8, left: $(step.element).offset().left-8 });

You could adjust the fudge factor to suit your needs or add an optional variable to the project. Not sure if this caters for all eventualities e.g. orphans etc, but works for me ;)