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>
</button>

Trigger

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:

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

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.

Actions

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.

enter

private

Called when a show event has been received

Parameters:

  • e Object

getTriggerTargetElement

private

handleTriggerEvent

private

hide

private

Hide the tooltip/popover

leave

private

Called when a hide event has been received

Parameters:

  • e Object

replaceArrow

private

Position the tooltip/popover's arrow

Parameters:

  • delta Object
  • dimension Object
  • isVertical Object

show

private

Show the tooltip/popover

toggle

private

Called for a click event

Parameters:

  • e Object

_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 string private

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

inState {InState} private

Current state for events

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:78

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

Ember.run timer

title string public

transitionDuration number public

The duration of the fade transition

triggerElement string 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:87

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

onHidden

public

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

onHide

public

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

onShow

public

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

onShown

public

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

Classes