Automatic placement of tooltips/popovers

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...';
    }
});

[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