PopOver auto adjust placement

Question

I am facing an issue with PopOver. I want it to auto adjust at all positions. If it doesn't find space on right side it opens at left. But I want it to do the same thing for top/bottom. i.e if it doesn't find space at top it should open at bottom and vice versa. Isn't there any way I can do it for all sides?

$('[data-toggle="popover"]').popover({
        trigger: 'manual',
        placement: 'auto right'
    })

The HTML

<a data-toggle="popover" class="hlpicon" data-html="true" data-trigger="hover" data-container="body" data-content="This will open a popover" data-original-title="" title=""></a>

score 4 · Accepted Answer · edited Oct 05 '18 at 11:30

4

You should be able to use the placement option as either a string or a function returning a string:

$('[data-toggle="popover"]').popover({
    trigger: 'manual',
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
});

For context, the source of this code is Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge? (which declares attribution to be not required - just adding this as a resource).

edited Oct 05 '18 at 11:30

trichoplax is on Codidact now

643
7
18

answered May 27 '16 at 16:31

Charlie

1,117
9
12

Could you please tell me what is `context` and `source`? Also check my updated question, I have added the HTML as well(in case its useful) – Multi stack May 27 '16 at 17:04
Context was an example. Source is used to pass the function. – Charlie May 27 '16 at 17:11
In your HTML, you have the data-trigger set to hover, but in the jQuery you have the trigger set to manual. You will want to remove one of those, depending on if you want the popover to show when hovered over, or clicked on – Charlie May 27 '16 at 17:13
You have taken this 515 and 110 values arbitrarily? – Multi stack May 31 '16 at 18:09
1

@Multistack source of magic numbers is http://stackoverflow.com/questions/9956958/changing-the-position-of-bootstrap-popovers-based-on-the-popovers-x-position-in – demon101 Feb 05 '17 at 17:07

score 0 · Answer 2 · answered Aug 26 '19 at 06:52

The chosen solution was a good start but not enought in my case. I had to replace position.top by $(source).offset().top - $(window).scrollTop()

This is my working solution

$('[data-toggle="popover"]').popover({
                        [...]
                        placement: function (context, source) {

                            if ($(source).offset().top - $(window).scrollTop() < 280) {
                                return "bottom";
                            }

                            return "top";
                        }
                    }).popover('show');

score 0 · Answer 3 · answered Oct 16 '22 at 12:07

0

Think this will be help full in case:

$element.popover("update")

it will update your popover easily.

answered Oct 16 '22 at 12:07

Ibrahim Mussa

1

PopOver auto adjust placement

3 Answers3

Linked