Components.Tooltip Class
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">
{{bs-tooltip title="This is a tooltip"}}
</button>
You can also use the component in a block form to set the title:
<button class="btn">
{{#bs-tooltip}}This is a tooltip{{/bs-tooltip}}
</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 jQuery selector to attach the tooltip to any other existing DOM element.
With the special value "parentView" you can attach the tooltip to the DOM element of the parent component:
{{#my-component}}
{{bs-tooltip title="This is a tooltip" triggerElement="parentView"}}
{{/my-component}}
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:
visibleto show/hide the tooltip programmaticallyfadeto disable the fade in transitiondelay(ordelayShowanddelayHide) to add a delayviewportSelectorandviewportPaddingto customize the viewport that affectsautoPlacement
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:
onShowonShownonHideonHidden
Item Index
Methods
Properties
Methods
addListeners
privateapplyPlacement
privatePosition the tooltip/popover
Parameters:
-
offsetObject -
placementObject
enter
privateCalled when a show event has been received
Parameters:
-
eObject
getViewportAdjustedDelta Top: number, left: number
privateParameters:
-
placementObject -
posObject -
actualWidthObject -
actualHeightObject
Returns:
}
hide
privateHide the tooltip/popover
leave
privateCalled when a hide event has been received
Parameters:
-
eObject
removeListeners
privatereplaceArrow
privatePosition the tooltip/popover's arrow
Parameters:
-
deltaObject -
dimensionObject -
isVerticalObject
show
privateShow the tooltip/popover
toggle
privateCalled for a click event
Parameters:
-
eObject
Properties
_renderInPlace boolean
privatearrowElement object
privateThe jQuery object of the arrow element.
autoPlacement boolean
publicWhen true it will dynamically reorient the tooltip/popover. For example, if placement is "left", the
tooltip/popover will display to the left when possible, otherwise it will display right.
Default: false
delay number
publicDelay showing and hiding the tooltip/popover (ms). Individual delays for showing and hiding can be specified by using the
delayShow and delayHide properties.
Default: 0
delayHide number
publicDelay hiding the tooltip/popover. This property overrides the general delay set with the delay property.
Default: 0
delayShow number
publicDelay showing the tooltip/popover. This property overrides the general delay set with the delay property.
Default: 0
fade boolean
publicSet to false to disable fade animations.
Default: true
hoverState string
privateCurrent hover state, 'in', 'out' or null
in boolean
privateUsed to apply Bootstrap's "in" class
Default: false
inDom boolean
privateinState {InState}
privateCurrent state for events
overlayElement object
privateThe jQuery object of the overlay element.
overlayId string
privateThe id of the overlay element.
renderInPlace boolean
publicIf true component will render in place, rather than be wormholed.
Default: false
timer unknown
privateEmber.run timer
title string
publictransitionDuration number
publicThe duration of the fade transition
Default: 150
triggerElement string
publicThe DOM element that triggers the tooltip/popover. By default it is the parent element of this component. You can set this to any jQuery 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
publicThe 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.
Default: 'hover focus'
triggerTargetElement {jQuery}
privateusesTransition boolean
privateUse CSS transitions when showing/hiding?
viewportElement object
privateThe jQuery object of the viewport element.
viewportPadding number
publicTake a padding into account for keeping the tooltip/popover within the bounds of the element given by viewportSelector.
Default: 0
viewportSelector string
publicKeeps the tooltip/popover within the bounds of this element when autoPlacement is true. Can be any valid jQuery selector.
Default: 'body'
visible boolean
publicYou can programmatically show the tooltip/popover by setting this to true
Default: false
Events
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).