limestone/TooltipDecorator

Limestone styled tooltip components.

Import Usage

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

Members

TooltipDecorator   Higher-Order Component

A higher-order component which positions limestone/TooltipDecoratorlimestone/TooltipDecorator.Tooltip in relation to the wrapped component.

The tooltip is automatically displayed when the decorated 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 Usage

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

Configuration

screenEdgeKeepout

Number

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 48 is derived from a standard 24px screen-keepout size plus the standard Spotlight-outset (24px) margin/padding value which keeps elements and text aligned inside a limestone/Panelslimestone/Panels.Panel. Note: This value will be scaled according to the resolution.

Default: 48

---

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

---

noArrow

Boolean

Tooltip without the arrow.

---

tooltipCss

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• tooltip - The root class name

---

tooltipDelay

Number

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

Default: 500

---

tooltipImage

StringObject

Source for the image. String value or Object of values used to determine which image will appear on a specific screenSize.

---

tooltipImageSize

Object

The size of the image.

The following properties should be provided:

• height - The height of the image

• width - The width of the image

---

tooltipMarquee

Boolean

Allows the tooltip to marquee.

Specifying a limestone/TooltipDecoratorlimestone/TooltipDecorator.TooltipDecorator.tooltipWidth restricts the marquee to that size.

---

tooltipPosition

'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'

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

TooltipDecorator 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

For type="balloon", the default is "top right" For type="transparent", the default is "bottom center"

---

tooltipProps

Object

Properties to be passed to tooltip component.

---

tooltipRelative

Boolean

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 the tooltipDestinationProp key in this HoC's config object. A relatively positioned Tooltip for a Button, for example, must be placed in the decoration prop.

It may be necessary to assign the CSS rule position to the containing element so relatively positioned Tooltip has a frame to "stick to" the edge of.

Anchoring points can be visualized as follows:

┌───◎───┐
◎       ◎
└───◎───┘

---

tooltipText

StringNode

Tooltip content.

---

tooltipType

'balloon''transparent'

Type of tooltip.

Value	Tooltip Appearance
'balloon'	Tooltip with a border, background and arrow to the activator
'transparent'	Text only without any of the decorations above

Default: 'balloon'

---

tooltipUpdateDelay

Number

The interval (in milliseconds) to recheck the math for a currently showing tooltip's positioning and orientation. Useful if your anchor element moves.

Default: 400

---

tooltipWidth

NumberString

The width of tooltip content.

Value expects a number of pixels, which will be automatically scaled to the appropriate size given the current screen resolution, or a string value containing a measurement and a valid CSS unit included. If the content goes over the given width, it will automatically wrap, or marquee if marquee is enabled.

When null, content will auto-size and not wrap. If tooltipMarquee is also enabled, marqueeing will begin when the width is greater than the default (theme specified) width.

Tooltip   Component

A tooltip component with Limestone styling applied.

Import Usage

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

TooltipBase   Component

A stateless tooltip component with Limestone styling applied.

Import Usage

import {TooltipBase} from '@enact/limestone/TooltipDecorator';

Properties

Required Property •  children

Node

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

---

arrowAnchor

'left''center''right''top''middle''bottom'

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

For type="balloon", the default is "right" For type="transparent", the default is "center" (The arrow will not be visible)

---

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• tooltip - The root component class

• tooltipLabel - Applied the label node

---

direction

'above''below''left''right'

Direction of label in relation to the activator.

For type="balloon", the default is "above" For type="transparent", the default is "below"

---

labelOffset

Number

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 between -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: 0

---

marquee

Boolean

Allows the tooltip to marquee.

Specifying a limestone/TooltipDecoratorlimestone/TooltipDecorator.TooltipBase.width restricts the marquee to that size.

---

noArrow

Boolean

Tooltip without the arrow.

---

position

Object

Style object for tooltip position.

---

relative

Boolean

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.

---

tooltipCss

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• tooltip - The root class name

---

tooltipImage

StringObject

Source for the image. String value or Object of values used to determine which image will appear on a specific screenSize.

---

tooltipImageSize

Object

The size of the image.

The following properties should be provided:

• height - The height of the image

• width - The width of the image

---

tooltipRef

ObjectFunction

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

---

type

'balloon''transparent'

Type of tooltip.

Value	Tooltip Appearance
'balloon'	Tooltip with a border, background and arrow to the activator
'transparent'	Text only without any of the decorations above

Default: 'balloon'

---

width

NumberString

The width of tooltip content.

Value expects a number of pixels, which will be automatically scaled to the appropriate size given the current screen resolution, or a string value containing a measurement and a valid CSS unit included. If the content goes over the given width, it will automatically wrap, or marquee if marquee is enabled.

When null, content will auto-size and not wrap. If marquee is also enabled, marqueeing will begin when the width is greater than the default (theme specified) width.