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

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. We decided not to have any dependencies on 3rd party libraries, so we implement a subset of the same functionality ourselves. If something is missing or you have a very specific use case - please open an issue on GitHub and we'll discuss.

Since version 4.1 we position the popup using position: absolute; transform: translate(x,y); to match Bootstrap.

The position is calculated after popup opening when the zone is stable. At the moment we don't reposition the popup on scrolling. It might be supported in future releases, please vote for issues.

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.

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 also a special "auto" property, that is equal to "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "left", "left-top", "left-bottom", "right", "right-top", "right-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'.

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.