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
The boundary around the screen which the tooltip should never cross, typically involving flipping to an alternate orientation or adjusting its offset to remain on screen. The default of 24 is derived from a standard 12px screen-keepout size plus the standard Spotlight-outset (12px) margin/padding value which keeps elements and text aligned inside a Panel. Note: This value will be scaled according to the resolution.
Default: 24The name of the property which will receive the tooltip node.
By default,
TooltipDecoratorwill 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 thechildrenproperty will not be modified.Default: 'children'
Properties added to wrapped component
Disables the component but does not affect tooltip operation.
Default: falseTime to wait (in milliseconds) before showing tooltip on hover.
Default: 500- tooltipPosition
Position of the tooltip with respect to the wrapped component.
Value Tooltip 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 left '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 TooltipDectoratorattempts 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 viewportDefault: 'above'Properties to be passed to tooltip component.
Positions the tooltip relative to its container.
Determines whether your tooltip should position itself relative to its container or relative to the screen (absolute positioning on the floating layer). When setting to
true, to enable relative positioning, it may be important to specify thetooltipDestinationPropkey in this HoC's config object. A relatively positioned Tooltip for aButton, for example, must be placed in thedecorationprop.It may be necessary to assign the CSS rule
positionto the containing element so relatively positioned Tooltip has a frame to "stick to" the edge of.Anchoring points can be visualized as follows:
┌───◎───┐ ◎ ◎ └───◎───┘Tooltip content.
The interval (in milliseconds) to recheck the math for a currently showing tooltip's positioning and orientation. Useful if your anchor element moves.
Default: 400The 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.
import {Tooltip} from '@enact/moonstone/TooltipDecorator';TooltipBaseComponent
A stateless tooltip component with Moonstone styling applied.
import {TooltipBase} from '@enact/moonstone/TooltipDecorator';Properties
The node to be displayed as the main content of the tooltip.
Position of tooltip arrow in relation to the activator.
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'Direction of label in relation to the activator.
Default: 'above'A value representing the amount to offset the label portion of the tooltip.
In a "center" aligned tooltip, the label may be desirable to offset to one side or the other. This prop accepts a value betwen -0.5 and 0.5 (representing 50% to the left or right). This defaults to 0 offset (centered). It also automatically caps the value so it never positions the tooltip label past the anchored arrow. If the tooltip label or arrow has non-rectangular geometry (rounded corners, a wide tail, etc), you'll need to manually account for that in your provided offset value.
Default: 0Style object for tooltip position.
Anchors the tooltip relative to its container.
Reconfigures the component to anchor itself to the designated edge of its container. When this is not specified, the implication is that the component is "absolutely" positioned, relative to the viewport, rather than its parent layer.
Called when the tooltip mounts/unmounts, giving a reference to the DOM.
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.