moonstone/TooltipDecorator

Moonstone styled tooltip components.

import TooltipDecorator from '@enact/moonstone/TooltipDecorator';

Members

TooltipDecoratorHigher-Order Component

A higher-order component which positions Tooltip in relation to the wrapped component.

The tooltip is automatically displayed when the decoratorated component is focused after a set period of time.

The tooltip is positioned around the decorator where there is available window space.

Note that the direction of tooltip will be flipped horizontally in RTL locales.

import TooltipDecorator from '@enact/moonstone/TooltipDecorator';
Configuration
tooltipDestinationProp
String

The name of the property which will receive the tooltip node.

By default, TooltipDecorator will add a new child to the wrapped component, following any other children passed in. If a component needs to, it can specify another property to receive the tooltip and the children property will not be modified.

Default: 'children'
Properties added to wrapped component
disabled
Boolean

Disables the component but does not affect tooltip operation.

Default: false
tooltipCasing
String

The casing of tooltipText.

See: i18n/Uppercase#casing
Default: 'upper'
tooltipDelay
Number

Time to wait (in milliseconds) before showing tooltip on hover.

Default: 500
tooltipPosition
String

Position of the tooltip with respect to the wrapped component.

ValueTooltip Direction
'above'Above component, flowing to the right
'above center'Above component, centered
'above left'Above component, flowing to the left
'above right'Above component, flowing to the right
'below'Below component, flowing to the right
'below center'Below component, centered
'below left'Below component, flowing to the right
'below right'Below component, flowing to the right
'left bottom'Left of the component, contents at the bottom
'left middle'Left of the component, contents middle aligned
'left top'Left of the component, contents at the top
'right bottom'Right of the component, contents at the bottom
'right middle'Right of the component, contents middle aligned
'right top'Right of the component, contents at the top

TooltipDectorator attempts to choose the best direction to meet layout and language requirements. Left and right directions will reverse for RTL languages. Additionally, the tooltip will reverse direction if it will prevent overflowing off the viewport

Default: 'above'
tooltipProps
Object

Properties to be passed to tooltip component.

tooltipText
Node

Tooltip content.

tooltipWidth
Numbernull

The width of tooltip content in pixels (px).

If the content goes over the given width, it will automatically wrap. When null, content does not wrap.

TooltipComponent

A tooltip component with Moonstone styling applied. If the Tooltip's child component is text, it will be uppercased unless casing is set.

import {Tooltip} from '@enact/moonstone/TooltipDecorator';

TooltipBaseComponent

A stateless tooltip component with Moonstone styling applied.

import {TooltipBase} from '@enact/moonstone/TooltipDecorator';
Properties
children
Node

The node to be displayed as the main content of the tooltip.

arrowAnchor
String

Position of tooltip arrow in relation to the activator.

  • Values: 'left', 'center', 'right', 'top', 'middle', 'bottom'

Note that 'left', 'center', 'right' are applicable when direction is in vertical orientation (i.e. 'above', 'below'), and 'top', 'middle', and 'bottom' are applicable when direction is in horizontal orientation (i.e. 'left', 'right')

Default: 'right'
arrowPosition
Number

Position of the arrow anchor. Takes values between 0 and 1. This will be the left position percentage relative to the tooltip.

direction
String

Direction of label in relation to the activator.

  • Values: 'above', 'below', 'left', and 'right'

Default: 'above'
position
Object

Style object for tooltip position.

tooltipRef
Function

Called when the tooltip mounts/unmounts, giving a reference to the DOM.

width
Numbernull

The width of tooltip content in pixels (px).

If the content goes over the given width, then it will automatically wrap. When null, content does not wrap.

ArrayBooleanFunctionModuleNumberObjectString