Components.Popover public

Component that implements Bootstrap popovers.

By default it will attach its listeners (click) to the parent DOM element to trigger the popover:

<button class="btn">
  <BsPopover @title="this is a title">and this the body</BsPopover>


The trigger element is the DOM element that will cause the popover to be shown when one of the trigger events occur on that element. By default the trigger element is the parent DOM element of the component, and the trigger event will be "click".

The triggerElement property accepts any CSS selector to attach the popover to any other existing DOM element. With the special value "parentView" you can attach the popover to the DOM element of the parent component:

  <BsPopover @triggerElement="parentView">This is a popover</BsPopover>

To customize the events that will trigger the popover use the triggerEvents property, that accepts an array or a string of events, with "hover", "focus" and "click" being supported.

Placement options

By default the popover will show up to the right of the trigger element. Use the placement property to change that ("top", "bottom", "left" and "right"). To make sure the popover will not exceed the viewport (see Advanced customization) you can set autoPlacement to true. A popover with `placement="right" will be placed to the right if there is enough space, otherwise to the left.

Advanced customization

Several other properties allow for some advanced customization:

  • visible to show/hide the popover programmatically
  • fade to disable the fade in transition
  • delay (or delayShow and delayHide) to add a delay
  • viewportSelector and viewportPadding to customize the viewport that affects autoPlacement
  • a close action is yielded, that allows you to close the tooltip:
<BsPopover as |po| >This is a popover <button onclick={{action po.close}}>Close</button></BsPopover>

See the individual API docs for each property.


When you want to react on the popover being shown or hidden, you can use one of the following supported actions:

  • onShow
  • onShown
  • onHide
  • onHidden

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.



Called when a show event has been received


  • e Object







Hide the tooltip/popover



Called when a hide event has been received


  • e Object



Position the tooltip/popover's arrow


  • delta Object
  • dimension Object
  • isVertical Object



Show the tooltip/popover



Called for a click event

_renderInPlace boolean private

arrowElement object private

The DOM element of the arrow element.

autoPlacement boolean public

By default it will dynamically reorient the tooltip/popover based on the available space in the viewport. For example, if placement is "left", the tooltip/popover will display to the left when possible, otherwise it will display right. Set to false to force placement according to the placement property

delay number public

Delay showing and hiding the tooltip/popover (ms). Individual delays for showing and hiding can be specified by using the delayShow and delayHide properties.

delayHide number public

Delay hiding the tooltip/popover. This property overrides the general delay set with the delay property.

delayShow number public

Delay showing the tooltip/popover. This property overrides the general delay set with the delay property.

destinationElement object private

The wormhole destinationElement

elementComponent {String} private

fade boolean public

Set to false to disable fade animations.

hoverState number private

Current hover state, 'in', 'out' or null

overlayElement object private

The DOM element of the overlay element.

overlayId string private

The id of the overlay element.

placement string public

Default: 'right'

Defined in addon/components/bs-popover.js:74

renderInPlace boolean public

If true component will render in place, rather than be wormholed.

showHelp boolean private

Used to apply Bootstrap's visibility class

timer unknown private timer

title string public

transitionDuration number public

The duration of the fade transition

triggerElement string | null public

The DOM element that triggers the tooltip/popover. By default it is the parent element of this component. You can set this to any CSS selector to have any other element trigger the tooltip/popover. With the special value of "parentView" you can attach the tooltip/popover to the parent component's element.

triggerEvents array|string public

Default: 'click'

Inherited from Components.ContextualHelp but overwritten in addon/components/bs-popover.js:83

usesTransition boolean private

Use CSS transitions?

viewportElement object private

The DOM element of the viewport element.

viewportPadding number public

Take a padding into account for keeping the tooltip/popover within the bounds of the element given by viewportSelector.

viewportSelector string public

Keeps the tooltip/popover within the bounds of this element when autoPlacement is true. Can be any valid CSS selector.

visible boolean public

You can programmatically show the tooltip/popover by setting this to true



This action is called when the tooltip/popover has finished being hidden from the user (will wait for CSS transitions to complete).



This action is called immediately when the tooltip/popover is about to be hidden.



This action is called immediately when the tooltip/popover is about to be shown.



This action will be called when the tooltip/popover has been made visible to the user (will wait for CSS transitions to complete).