Some of the components we have are designed to be opened inside of the popup:

- `Datepicker`
- `Dropdown`
- `Popover`
- `Tooltip`
- `Typeahead`

When the popup is opened, it is positioned correctly next to the `target` element and fits in the viewport. It is also possible to provide some options, ex. whether the popup should be opened to the `top` or to the `bottom` of the `target` element.

For instance here the tooltip is always forced to be opened to the `right`, even if it won't fit in the viewport.

Bootstrap uses `popper.js` library for positioning. Before version `12.0.0`, as we did not want to have any dependencies on 3rd party libraries, we had implemented a subset of the same functionalities ourselves.

From version `4.1` to version `11` we positioned the popup using `position: absolute; transform: translate(x,y);` to match Bootstrap.
The position was calculated after popup opening when the zone is stable. We didn't reposition the popup on scrolling.

Since version `12.0.0` with Bootstrap 5 support, the positioning is done with popper v2. `@popperjs/core` is defined as a peer dependency, so be sure to include it in your package.json.

Components in question have two common inputs that help with positioning: `placement` and `container`

#### `Placement`

Placement specifies where the popup should be positioned in the order of preference.

Accepts an array of strings or a string with space separated values.

since 12.0.0
Possible values are `"top"`, `"top-start"`, `"top-left"`, `"top-end"`, `"top-right"`, `"bottom"`, `"bottom-start"`, `"bottom-left"`, `"bottom-end"`, `"bottom-right"`, `"start"`, `"left"`, `"start-top"`, `"left-top"`, `"start-bottom"`, `"left-bottom"`, `"end"`, `"right"`, `"end-top"`, `"right-top"`, `"end-bottom"`, `"right-bottom"`

before 12.0.0
Possible values were `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-top"`, `"left-bottom"`, `"right"`, `"right-top"`, `"right-bottom"`

- We go through the provided placements one-by-one an try to position the popup
- If it doesn't fit, we try the next one
- If no provided placements in fit the viewport, we use the first provided one

If no `placement` value is provided at all, each component has it's own default order of preference. Check the component API docs to find out the default order, ex. here is the tooltip's API.

There is also a special `"auto"` property, that is equal to `"top", "bottom", "start", "end", "top-start", "top-end", "bottom-start", "bottom-end", "start-top", "start-bottom", "end-top", "end-bottom"`

#### `Container`

Container specifies where the popup will be physically attached to the DOM.

By default it is attached as a sibling of the `target` element and the only optional supported container is `'body'`.

Bootstrap 5 has an experimental support for RTL, so the popper placement will be adapted if the page is in RTL mode with `<html dir="rtl">`

Consider the following example:

The first example with `right` placement will always display the tooltip visually on the right regardless of page direction.

The second example with `end` placement will take into account page direction and display the tooltip visually on the right by default and on the left in case of RTL direction.

This stays true for all placements containing `right`, `left`, `start` or `end`

There are two things that make dropdown a bit special at the moment: it won't be positioned dynamically when inside the navbar and the popup (dropdown menu) is always attached to the DOM.

1. When dropdown is used inside the Bootstrap's `navbar`, it will not be positioned (to match Bootstrap behaviour and work fine on mobile). You can override it by using the `display` input.

2. As `Dropdown` is not a component, but a set of directives, the dropdown menu popup is always attached to the DOM even when not visible. Depending on the `container` input, the menu will always be attached either to the body or to the dropdown element.