Components.Tooltip public

Component that implements Bootstrap tooltips.

By default, it will attach its listeners (mouseover and focus) to the parent DOM element to trigger the tooltip:

<button class="btn">
  <BsTooltip @title="This is a tooltip" />
</button>

You can also use the component in a block form to set the title:

<button class="btn">
  <BsTooltip>
    This is a tooltip
  </BsTooltip>
</button>

Trigger

The trigger element is the DOM element that will cause the tooltip 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 events will be "hover" and "focus".

The triggerElement property accepts any CSS selector to attach the tooltip to any other existing DOM element.

To customize the events that will trigger the tooltip 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 tooltip will show up on top of the trigger element. Use the placement property to change that ("top", "bottom", "left" and "right"). To make sure the tooltip will not exceed the viewport (see Advanced customization) you can set autoPlacement to true. A tooltip 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 tooltip 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:
<BsTooltip as |tt|>This is a tooltip <button onclick={{action tt.close}}>Close</button></BsTooltip>

See the individual API docs for each property.

Actions

When you want to react on the tooltip 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

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

toggle

private

Called for a click event

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.

renderInPlace boolean public

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

showHelp boolean private

Used to apply Bootstrap's visibility class

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.

triggerEvents array|string public

The event(s) that should trigger the tooltip/popover - click | hover | focus. You can set this to a single event or multiple events, given as an array or a string separated by spaces.

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).