To change Bootstrap’s default Popper config, see Popper’s configuration. The this context is set to the popover instance. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. When auto is specified, it will dynamically reorient the popover. How to position the popover: auto, top, bottom, left, right. For more information refer to Popper’s offset docs. The function must return an array with two numbers: skidding, distance. The triggering element DOM node is passed as the second argument. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. You can pass a string in data attributes with comma separated values like: data-bs-offset='10,20'. Offset of the popover relative to its target. Use text if you’re worried about XSS attacks. If false, innerText property will be used to insert content into the DOM. If true, HTML tags in the popover’s title will be rendered in the popover. For more information refer to Popper’s behavior docs.Īllow HTML in the popover. #.ĭefine fallback placements by providing a list of placements in array (in order of preference). This is common in responsive tables, input groups, and the like. When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom container so that the popover’s HTML appears within that element instead. Popovers can be triggered thanks to an element inside a shadow DOM.Popovers must be hidden before their corresponding elements have been removed from the DOM.text-nowrap on your s to avoid this behavior. When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width.disabled or disabled elements must be triggered on a wrapper element.

Triggering popovers on hidden elements will not work.

Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).

Zero-length title and content values will never show a popover.

Popovers are opt-in for performance reasons, so you must initialize them yourself.

Popovers require the popover plugin as a dependency.

You must include before bootstrap.js, or use one which contains Popper.

Popovers rely on the third party library Popper for positioning.

Things to know when using the popover plugin:

Popover by Scarlett MacDougal