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 tooltip LOCKED_TOOLTIP_BUFFER_PX TOOLTIP_ACTIVATION_MS TOOLTIP_DIRECTIONS TOOLTIP_MARGIN_PX

Accessors

implementation

Methods

activate activateEventListeners clearPending createLockedTooltip deactivate dismissLockedTooltip dismissLockedTooltips lockTooltip _determineDirection _onLockedTooltipDismiss _onLockTooltip _setAnchor _setStyle

Properties

element

element: null | HTMLElement = null

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

tooltip

tooltip: HTMLElement = ...

A cached reference to the global tooltip element

StaticLOCKED_TOOLTIP_BUFFER_PX

LOCKED_TOOLTIP_BUFFER_PX: number = 50

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

StaticTOOLTIP_ACTIVATION_MS

TOOLTIP_ACTIVATION_MS: number = 500

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

StaticTOOLTIP_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.

StaticTOOLTIP_MARGIN_PX

TOOLTIP_MARGIN_PX: number = 5

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

Accessors

Staticimplementation

Methods

activate

  • activate(
        element: HTMLElement,
        options?: {
            cssClass?: string;
            direction?: "UP" | "DOWN" | "LEFT" | "RIGHT" | "CENTER";
            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?: "UP" | "DOWN" | "LEFT" | "RIGHT" | "CENTER";
          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?: "UP" | "DOWN" | "LEFT" | "RIGHT" | "CENTER"

        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

activateEventListeners

  • activateEventListeners(): void

    Activate interactivity by listening for hover events on HTML elements which have a data-tooltip defined.

    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: "UP" | "DOWN" | "LEFT" | "RIGHT" | "CENTER"): void
    Protected

    Set tooltip position relative to an HTML element using an explicitly provided data-tooltip-direction.

    Parameters

    • direction: "UP" | "DOWN" | "LEFT" | "RIGHT" | "CENTER"

      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

Settings

Member Visibility

On This Page

Properties
Accessors
Methods