moonstone/ Tooltip Decorator
Exports the moonstone/TooltipDecorator.TooltipDecorator Higher-order Component (HOC), moonstone/TooltipDecorator.Tooltip and moonstone/TooltipDecorator.TooltipBase components. The default export is moonstone/TooltipDecorator.TooltipDecorator.
import TooltipDecorator from '@enact/moonstone/TooltipDecorator';
Members
TooltipDecoratorHigher-Order Component
moonstone/TooltipDecorator.TooltipDecorator is a Higher-order Component which positions moonstone/TooltipDecorator.Tooltip in relation to the Wrapped component. The tooltip is automatically displayed when the user hovers over the decorator for a given 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
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 thechildren
property will not be modified.Default: 'children'
Properties added to wrapped component
- disabled
When
true
, the component is shown as disabled but will show a tooltip, if present.Default: false- tooltipCasing
Configures the mode of uppercasing of the
tooltipText
that should be performed.Default: 'upper'- tooltipDelay
Number of milliseconds to wait before showing tooltip when hover.
Default: 500- tooltipPosition
Position of the tooltip with respect to the activating control. Valid values are
'above'
,'above center'
,'above left'
,'above right'
,'below'
,'below center'
,'below left'
,'below right'
,'left bottom'
,'left middle'
,'left top'
,'right bottom'
,'right middle'
,'right top'
. The values starting with'left
' and'right'
place the tooltip on the side (sideways tooltip) with two additional positions available,'top'
and'bottom'
, which places the tooltip content toward the top or bottom, with the tooltip pointer middle-aligned to the activator.Default: 'above'- tooltipPreserveCase ✘
When true, the case of the tooltipText will remain unchanged. Uses Uppercase HOC and mirrors the preserveCase prop
replaced by
tooltipCasing
Default: false- tooltipProps
An object containing properties to be passed to tooltip component.
- tooltipText
The text to be displayed as the main content of the tooltip.
- tooltipWidth
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.
TooltipComponent
moonstone/TooltipDecorator.Tooltip is 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
moonstone/TooltipDecorator.TooltipBase is a stateless tooltip component with Moonston styling applied.
import {TooltipBase} from '@enact/moonstone/TooltipDecorator';
Properties
- children •
The node to be displayed as the main content of the tooltip.
- arrowAnchor
Position of tooltip arrow in relation to the activator; valid values are
'left'
,'center'
,'right'
,'top'
,'middle'
, and'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'- direction
Direction of label in relation to the activator; valid values are
'above'
,'below'
,'left'
, and'right'
.Default: 'above'- position
Style object for tooltip position.
- tooltipRef
The method to run when the tooltip mounts/unmounts, giving a reference to the DOM.
- width
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.