Automatic placement of tooltips/popovers

[pilt]

Here's what I'm doing atm.

var getPlacement = function($el) {
    var offset = $el.offset(),
        top = offset.top,
        left = offset.left,
        height = $(document).outerHeight(),
        width = $(document).outerWidth(),
        vert = 0.5 * height - top,
        vertPlacement = vert > 0 ? 'bottom' : 'top',
        horiz = 0.5 * width - left,
        horizPlacement = horiz > 0 ? 'right' : 'left',
        placement = Math.abs(horiz) > Math.abs(vert) ?  horizPlacement : vertPlacement;
    return placement
};

and

$el.popover({
    placement: getPlacement($el),
    trigger: 'manual',
    html: true,
    title: function() {
        return 'Laddar...';
    },
    content: function() {
        return 'Laddar...';
    }
});

[paulrusso]

Does this work? Jacob wrote something for twipsy/popover but it doesn't seem to work in 2.0

#345

[quasiperfect]

this seams to work

placement: function (tip, element) {
        var offset = $(element).offset();
        height = $(document).outerHeight();
        width = $(document).outerWidth();
        vert = 0.5 * height - offset.top;
        vertPlacement = vert > 0 ? 'bottom' : 'top';
        horiz = 0.5 * width - offset.left;
        horizPlacement = horiz > 0 ? 'right' : 'left';
        placement = Math.abs(horiz) > Math.abs(vert) ?  horizPlacement : vertPlacement;
        return placement;
}

[fat]

don't think i'll be adding an option to teh plugins themselves. but if that works for you - it's meant to be extended like that :)

[paulrusso]

Cool, thanks man.

[A973C]

@quasiperfect Working like a charm with version 2.0.3. Thank you so much!

[bjourne]

quasiperfect's answer doesn't work in all cases because it does not take the size of the tooltip into account. So the position choosen will often be one which clips the popup to the viewports border.

[lucifurious]

Not to pee in quasiperfect's cheerios, but it also doesn't work if your target element has a min-width. One would need to do this for height/width instead:

height = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0,
width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0,

Still doesn't address width of tooltip... need to add:

height = (window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0)-$(tip).height(),
width = (window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0)-$(tip).width(),

Untested, typed-in code here... fyi

[dcodrlots]

I ran across this thread while looking to add auto placement for the popover tooltip today and wanted to share how this helped me. I added an if statement (based on quasiperfect's function) to the Tooltip prototype's show function right before the switch statement that sets the offset values (at line 148 of bootstrap-tooltip.js):

if(placement == 'auto') {
    var vert = 0.5 * $(document).outerHeight() - actualWidth;
    var vertPlacement = vert > 0 ? 'bottom' : 'top';
    var horiz = 0.5 * $(document).outerWidth() - actualHeight;
    var horizPlacement = horiz > 0 ? 'right' : 'left';
    placement = Math.abs(horiz) > Math.abs(vert) ?  horizPlacement : vertPlacement;
}

Now I just put this in the popover options:

'placement': 'auto'

Has worked for the first few tests. FYI, if you use this be aware It is not affected by how far down the user has scrolled and favors left and bottom placement over top placement (even if there is adequate space and more visible room at the top).

Edit: Updated location of change from location in my bootstrap.js file to bootstrap-tooltip.js file.

[mrohnstock]

Nice, thanks 👍 Saved my day!

[mindplay-dk]

Well now, all this back and forth and little mishaps and issues - this is exactly the reason why something like this should be part of the core; the devil is in the details.

I'm all for light weight, but in this case, it's a little too light weight - having tooltips and popovers open outside of the browser window, where the user can't see them, simply isn't useful.

If 5 lines of code will do the job, I'm not even sure light weight is really a meaningful argument.

Please reconsider?

[cvrebert]

@mindplay-dk: #6848, #7700, #7996

[mindplay-dk]

PS: a better way to do this, would be to allow for alternative placements.

For design reasons, your tooltips may have an ideal placement, and one or more alternative fall-back placements - for example, you may have a fixed sidebar on the right, so you know there will always be enough space for the tooltip on the right.

Allowing multiple alternative positions, separated by spaces, in order of preference, such as: placement: 'top right' which would place the tooltip on top if possible, otherwise to the right. Placement any could also be used as an alias for top right bottom left.

This behavior would also be backwards compatible, since specifying only one position with no alternatives would work the same as before.

[Michealz]

@quasiperfect: That work for me. thanks so much