Class TooltipManager

A singleton Tooltip Manager class responsible for rendering and positioning a dynamic tooltip element which is accessible as game.tooltip.

See

foundry.Game#tooltip

Example: API Usage

game.tooltip.activate(htmlElement, {text: "Some tooltip text", direction: "UP"});
game.tooltip.deactivate();

Example: HTML Usage

<span data-tooltip="Some Tooltip" data-tooltip-direction="LEFT">I have a tooltip</span>
<ol data-tooltip-direction="RIGHT">
  <li data-tooltip="The First One">One</li>
  <li data-tooltip="The Second One">Two</li>
  <li data-tooltip="The Third One">Three</li>
</ol>

Properties

element

element: HTMLElement | null = null

A reference to the HTML element which is currently tool-tipped, if any.

tooltip: HTMLElement = ...

A cached reference to the global tooltip element

`Static`LOCKED_TOOLTIP_BUFFER_PX

LOCKED_TOOLTIP_BUFFER_PX: number = 50

The number of pixels buffer around a locked tooltip zone before they should be dismissed.

`Static`TOOLTIP_ACTIVATION_MS

TOOLTIP_ACTIVATION_MS: number = 500

The number of milliseconds delay which activates a tooltip on a "long hover".

`Static`TOOLTIP_DIRECTIONS

TOOLTIP_DIRECTIONS: {
    CENTER: string;
    DOWN: string;
    LEFT: string;
    RIGHT: string;
    UP: string;
} = ...

The directions in which a tooltip can extend, relative to its tool-tipped element.

`Static`TOOLTIP_MARGIN_PX

TOOLTIP_MARGIN_PX: number = 5

An amount of margin which is used to offset tooltips from their anchored element.

Accessors

`Static`implementation

get implementation(): typeof TooltipManager
Retrieve the configured TooltipManager implementation.

Returns typeof TooltipManager

Methods

activate

activate(
    element: HTMLElement,
    options?: {
        cssClass?: string;
        direction?: "CENTER" | "LEFT" | "RIGHT" | "UP" | "DOWN";
        html?: string | HTMLElement;
        locked?: boolean;
        text?: string;
    },
): void
Activate the tooltip for a hovered HTML element which defines a tooltip localization key.
Parameters
- element: HTMLElement
  The HTML element being hovered.
- Optionaloptions: {
      cssClass?: string;
      direction?: "CENTER" | "LEFT" | "RIGHT" | "UP" | "DOWN";
      html?: string | HTMLElement;
      locked?: boolean;
      text?: string;
  } = {}
  Additional options which can override tooltip behavior.
  - OptionalcssClass?: string
    An optional, space-separated list of CSS classes to apply to the activated tooltip. If this is not provided, the CSS classes are acquired from the data-tooltip-class attribute of the element or one of its parents.
  - Optionaldirection?: "CENTER" | "LEFT" | "RIGHT" | "UP" | "DOWN"
    An explicit tooltip expansion direction. If this is not provided, the direction is acquired from the data-tooltip-direction attribute of the element or one of its parents.
  - Optionalhtml?: string | HTMLElement
    Explicit HTML to inject into the tooltip rather than using tooltip text. If passed as a string, the HTML string is cleaned with foundry.utils.cleanHTML. An explicit HTML string may also be set with the data-tooltip-html attribute on the element.
  - Optionallocked?: boolean
    An optional boolean to lock the tooltip after creation. Defaults to false.
  - Optionaltext?: string
    Explicit tooltip text to display. If this is not provided the tooltip text is acquired from the element's data-tooltip-text attribute if present and otherwise from its data-tooltip attribute. The data-tooltip text will be automatically localized. If data-tooltip is not a localization string, the text is rendered as HTML (cleaned). Both options.text and data-tooltip-text do not support HTML. It is not recommended to use data-tooltip for plain text and HTML as it could cause an unintentional localization. Instead use data-tooltip-text and data-tooltip-html, respectively.
Returns void

activateListeners

activateListeners(
document: Document,
__namedParameters?: { _deprecated?: boolean },
): void
Activate interactivity in the given document by listening for hover events on HTML elements which have a data-tooltip defined.
Parameters
- document: Document
  The document to bind to.
- __namedParameters: { _deprecated?: boolean } = {}
Returns void

clearPending

clearPending(): void
Internal
Clear any pending activation workflow.

Returns void

createLockedTooltip

createLockedTooltip(
    position: { bottom: string; left: string; right: string; top: string },
    text: string,
    options?: { cssClass?: string },
): HTMLElement
Create a locked tooltip at the given position.
Parameters
- position: { bottom: string; left: string; right: string; top: string }
  A position object with coordinates for where the tooltip should be placed
  - bottom: string
    Explicit bottom position for the tooltip
  - left: string
    Explicit left position for the tooltip
  - right: string
    Explicit right position for the tooltip
  - top: string
    Explicit top position for the tooltip
- text: string
  Explicit tooltip text or HTML to display.
- Optionaloptions: { cssClass?: string } = {}
  Additional options which can override tooltip behavior.
  - OptionalcssClass?: string
    An optional, space-separated list of CSS classes to apply to the activated tooltip.
Returns HTMLElement

deactivate

deactivate(): void
Deactivate the tooltip from a previously hovered HTML element.

Returns void

dismissLockedTooltip

dismissLockedTooltip(element: HTMLElement): void
Dismiss a given locked tooltip.
Parameters
- element: HTMLElement
  The locked tooltip to dismiss.
Returns void

dismissLockedTooltips

dismissLockedTooltips(): void
Dismiss the set of active locked tooltips.

Returns void

lockTooltip

lockTooltip(): HTMLElement
Lock the current tooltip.

Returns HTMLElement

`Protected`_determineDirection

_determineDirection(): any
Protected
If an explicit tooltip expansion direction was not specified, figure out a valid direction based on the bounds of the target element and the screen.

Returns any

`Protected`_onLockedTooltipDismiss

_onLockedTooltipDismiss(event: MouseEvent): void
Protected
Handle dismissing a locked tooltip.
Parameters
- event: MouseEvent
  The click event.
Returns void

`Protected`_onLockTooltip

_onLockTooltip(event: MouseEvent): void
Protected
Handle a request to lock the current tooltip.
Parameters
- event: MouseEvent
  The click event.
Returns void

`Protected`_setAnchor

_setAnchor(direction: "CENTER" | "LEFT" | "RIGHT" | "UP" | "DOWN"): void
Protected
Set tooltip position relative to an HTML element using an explicitly provided data-tooltip-direction.
Parameters
- direction: "CENTER" | "LEFT" | "RIGHT" | "UP" | "DOWN"
  The tooltip expansion direction specified by the element or a parent element.
Returns void

`Protected`_setStyle

_setStyle(position?: object): void
Protected
Apply inline styling rules to the tooltip for positioning and text alignment.
Parameters
- Optionalposition: object = {}
  An object of positioning data, supporting top, right, bottom, left, and textAlign
Returns void

Class TooltipManager

See

Example: API Usage

Example: HTML Usage

Index

Properties

Accessors

Methods

Properties

element

tooltip

StaticLOCKED_TOOLTIP_BUFFER_PX

StaticTOOLTIP_ACTIVATION_MS

StaticTOOLTIP_DIRECTIONS

StaticTOOLTIP_MARGIN_PX

Accessors

Staticimplementation

Returns typeof TooltipManager

Methods

activate

Parameters

OptionalcssClass?: string

Optionaldirection?: "CENTER" | "LEFT" | "RIGHT" | "UP" | "DOWN"

Optionalhtml?: string | HTMLElement

Optionallocked?: boolean

Optionaltext?: string

Returns void

activateListeners

Parameters

Returns void

clearPending

Returns void

createLockedTooltip

Parameters

bottom: string

left: string

right: string

top: string

OptionalcssClass?: string

Returns HTMLElement

deactivate

Returns void

dismissLockedTooltip

Parameters

Returns void

dismissLockedTooltips

Returns void

lockTooltip

Returns HTMLElement

Protected_determineDirection

Returns any

Protected_onLockedTooltipDismiss

Parameters

Returns void

Protected_onLockTooltip

Parameters

Returns void

Protected_setAnchor

Parameters

Returns void

Protected_setStyle

Parameters

Returns void

Settings

On This Page

`Static`LOCKED_TOOLTIP_BUFFER_PX

`Static`TOOLTIP_ACTIVATION_MS

`Static`TOOLTIP_DIRECTIONS

`Static`TOOLTIP_MARGIN_PX

`Static`implementation

`Optional`cssClass?: string

`Optional`direction?: "CENTER" | "LEFT" | "RIGHT" | "UP" | "DOWN"

`Optional`html?: string | HTMLElement

`Optional`locked?: boolean

`Optional`text?: string

`Optional`cssClass?: string

`Protected`_determineDirection

`Protected`_onLockedTooltipDismiss

`Protected`_onLockTooltip

`Protected`_setAnchor

`Protected`_setStyle