CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4popper.js
Ivo Mynttinen
Ivo Mynttinen

Reputation: 33

How can I change the position of Bootstrap 4 popovers?

I'm trying to align Bootstrap 4 popovers on the left or right side of their parent button. I know that I could achieve it by using "offset", but that would mean I'd have to set a different offset value for each button as those are never the same width.

Is there some way to utilize popper.js (which BS is using for positioning) to achieve that alignment, instead of always centering the popover?

For reference, this is the result I'm looking for

Upvotes: 2

Views: 2866

Answers (3)

Alexander
Alexander

Reputation: 225

@Oyalhi's answer brought me to the following idea: If Bootstrap allows allows the 'popperConfig' property, you can also use the 'placement' option provided by popper.js. And indeed: the following code works for my popover using jQuery and Bootstrap 4. The initial placement 'top' is overriden by the 'top-start' while building the tooltip. However, you might have to introduce your own .css because Bootstrap doesn't provide styles for this placement.

$('#myElement').popover({
    placement: 'top', 
    content: "some random text",
    popperConfig: {
        placement: 'top-start'
    }
});

Upvotes: 1

oyalhi
oyalhi

Reputation: 3994

In case you are here because you would like to set the offset when using react-bootstrap, below is how you do it. By adding popperConfig property to the Dropdown.Menu component:

<Dropdown>
  <Dropdown.Toggle>
    Select Option
  </Dropdown.Toggle>
  <Dropdown.Menu
    popperConfig={{
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 10],
          },
        },
      ],
    }}>
    <Dropdown.Item>Menu Item 1</Dropdown.Item>
    <Dropdown.Item>Menu Item 2</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Hope this helps someone out there.

Upvotes: 1

Ivo Mynttinen
Ivo Mynttinen

Reputation: 33

After messing around with it for a while I figured out I can achieve what I want by using the offset since it does not only accept pixel values, but also % relative to the parent object.

So I'm just doing:

data-offset="-50%"

Upvotes: 1

Related Questions