Module: Tooltip

A tooltip component to display contextual messages.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`buffer`	number	The buffer from the edge of the window, in px.
`children`	JSX.Element	React element children.
`content`	string	Tooltip content. Can only be strings. Use React children for html.
`contentAttributes`	object	Attributes for the tooltip content text component.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`icon`	string	The name for the icon to use from the Gform admin icon library.
`iconPrefix`	string	The prefix for the icon class.
`iconPreset`	string	The preset for the icon (optional).
`intentDelay`	number	The delay to detect intent before the tooltip displays, in ms.
`id`	string	The id for the tooltip. If not passed auto generated using uniqueId from our utils with a prefix of `tooltip`.
`maxWidth`	number	The max width of the tooltip, in px.
`position`	string	The position of the tooltip, one of `top`, `right`, `bottom`, or `left`.
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`tagName`	string	The tag to use for the tooltip. Defaults to `div`.
`theme`	string	The theme of the tooltip, one of `chathams` or `port`.
`tooltipCustomAttributes`	object	Custom attributes for the tooltip.

type

string

The type of the tooltip button, one of default, success, or error.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: modules/Tooltip/index.js, line 13

Returns:

Return the functional tooltip component in React.

Type:: JSX.Element

Example

import Tooltip from '@gravityforms/components/react/admin/modules/Tooltip';

return (
     <Tooltip customClasses={ [ 'example-class' ] } maxWidth={ 200 }>
         { children }
     </Tooltip>
);

Methods

(inner) TooltipContent(con, cAttributes) → {JSX.Element|null}

The tooltip content if content exists, otherwise null.

Parameters:

Name	Type	Description
`con`	string	Tooltip content. Can only be strings.
`cAttributes`	object	Custom attributes for the tooltip content.

Source: modules/Tooltip/index.js, line 442

Returns:

Type:: JSX.Element | null

(inner) getNewPositionPercentageInFrame(from, to, rect, frame, bf) → {number}

Get the new position percentage in frame from the old position.

Parameters:

Name	Type	Description
`from`	string	Initial position of rect, one of `top`, `bottom`, `left`, or `right`.
`to`	string	Final position of rect, one of `top`, `bottom`, `left`, or `right`.
`rect`	DOMRect	The DOMRect object of rect.
`frame`	Window	The DOM element of the frame.
`bf`	number	The buffer from the edge of the frame, in px.

Source: modules/Tooltip/index.js, line 163

Returns:

The new position percentage in frame.

Type:: number

(inner) getPercentageInFrame(w, h, offsetLeft, offsetRight, offsetTop, offsetBottom) → {number}

Get the percentage of an area that is within frame, whether the box area is defined by width and height.

Parameters:

Name	Type	Description
`w`	number	The width of the box.
`h`	number	The width of the box.
`offsetLeft`	number	The left offset of the box, which is subtracted from the box area.
`offsetRight`	number	The right offset of the box, which is subtracted from the box area.
`offsetTop`	number	The top offset of the box, which is subtracted from the box area.
`offsetBottom`	number	The bottom offset of the box, which is subtracted from the box area.

Source: modules/Tooltip/index.js, line 111

Returns:

The percentage of the box area that is within frame, as a decimal.

Type:: number

(inner) getSmartPosition(bf, pos, tRef) → {string}

Get smart position based on area in the frame.

Parameters:

Name	Type	Description
`bf`	number	The buffer from the edge of the frame, in px.
`pos`	string	The current position of the tooltip.
`tRef`	object	The ref object of the tooltip.

Source: modules/Tooltip/index.js, line 363

Returns:

The smart position based on area.

Type:: string