FeatureRequest: Better positioning.

[desian78]

Situation: One of my steps have an large div as element. The tooltip should be shown up. So I want to position it on top-right.

My first solution was to create an hidden fake object

to positioning. But as expected... the backdrop white space is also bound on this. So i have not a practical solution.

I suggest to give a positioning, that is calculated after the current calculation is done Just an option like == positionAdjust:{top: 123px,right: 123px,bottom: 123px,left: 123px} == So it is possible to manual moving the tooltip around.

[IGreatlyDislikeJavascript]

Good idea, thank you. I'll add this to the to-do list.

In the meantime, if you don't want to wait, you should be able to implement this yourself very easily. I haven't tested the below, so just off the top of my head...

At the bottom of this function, you will see the code that manipulates the popover position. You haven't mentioned whether you're using BS3 or BS4, so broadly the steps are:

For BS4:

Locate function _showPopover() around line 1750. In this function, locate if(this._options.framework == "bootstrap4"). Do something like this:

if(this._options.framework == "bootstrap4")
{
    if(isOrphan)
    {
        ....blah....
    }
    else
    {
        // BS3 popover accepts jq object or string literal
        popOpts.selector = "#" + step.element[0].id;

        popOpts.offset = {
                            offset: "<<<<MODIFIER>>>>"
                        };
    }
}

Where <<MODIFIER>> is a string that defines the X and Y adjustment. For example, offset: "10px, -20px" will move the popover 10px right and 20px up.

You can access the step options with the step object, so something like this would be fine:

    popOpts.offset = {
                        offset: step.positionAdjust.xPos + "px, " + step.positionAdjust.yPos
                    };

For BS3:

Simply locate function Tour.prototype._reposition() around line 1990. This one should be self explanatory, the $tip object is the BS3 popover object so you can manipulate it as required. Make your adjustments before the call to $tip.offset(tipOffset);

Hopefully that helps you in the short term, and I'll look at implementing a proper option as soon as possible.

[IGreatlyDislikeJavascript]

I've run into an issue with popper.js again - it won't reliably reposition popover on both axis, meaning I can't solve this problem yet.

I've opened an issue in the popper.js repo: https://github.com/FezVrasta/popper.js/issues/832

[IGreatlyDislikeJavascript]

I now think this may be fixable. Bootstrap team have responded and fixed the issue in BS4.4.0.

I 'll try to implement it again and test it over the next weeks. If it all works, it does unfortunately mean you'll be forced to update Bootstrap but there's no way round that.

Progress to follow.

[IGreatlyDislikeJavascript]

Nope, I jumped the gun. There are definitely 2 issues. The BS4 issue has been fixed, but the popper issue remains. We need to wait for the fix in popper v2 release, so unfortunately this issue is on hold again.