Options
All
  • Public
  • Public/Protected
  • All
Menu

Class TooltipManager

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

see

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>

Hierarchy

  • TooltipManager

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

tooltip

tooltip: HTMLElement = ...

A cached reference to the global tooltip element

element

element: HTMLElement = null

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

Private #active

#active: boolean = false

Is the tooltip currently active?

Private #activationTimeout

#activationTimeout: any

A reference to a window timeout function when an element is activated.

Private #deactivationTimeout

#deactivationTimeout: any

A reference to a window timeout function when an element is deactivated.

Private #pending

#pending: HTMLElement

An element which is pending tooltip activation if hover is sustained

Static TOOLTIP_MARGIN_PX

TOOLTIP_MARGIN_PX: number = 5

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

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: { UP: string; DOWN: string; LEFT: string; RIGHT: string; CENTER: string } = ...

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

Type declaration

  • UP: string
  • DOWN: string
  • LEFT: string
  • RIGHT: string
  • CENTER: string

Methods

activateEventListeners

  • activateEventListeners(): void

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

    Returns void

activate

  • activate(element: HTMLElement, [options={}]?: { text: string; direction: { UP: string; DOWN: string; LEFT: string; RIGHT: string; CENTER: string }; cssClass: string }): void

  • Activate the tooltip for a hovered HTML element which defines a tooltip localization key.

    Parameters

    • element: HTMLElement

      The HTML element being hovered.

    • [options={}]: { text: string; direction: { UP: string; DOWN: string; LEFT: string; RIGHT: string; CENTER: string }; cssClass: string } = {}

      Additional options which can override tooltip behavior.

      • text: string
      • direction: { UP: string; DOWN: string; LEFT: string; RIGHT: string; CENTER: string }
        • UP: string
        • DOWN: string
        • LEFT: string
        • RIGHT: string
        • CENTER: string
      • cssClass: string

    Returns void

clearPending

  • clearPending(): void

  • Clear any pending activation workflow.

    internal

    Returns void

Private #onActivate

  • #onActivate(event: PointerEvent): void

  • Handle hover events which activate a tooltipped element.

    Parameters

    • event: PointerEvent

      The initiating pointerenter event

    Returns void

Private #onDeactivate

  • #onDeactivate(event: PointerEvent): void

  • Handle hover events which deactivate a tooltipped element.

    Parameters

    • event: PointerEvent

      The initiating pointerleave event

    Returns void

Private #startDeactivation

  • #startDeactivation(): void

  • Start the deactivation process.

    Returns void

Private #clearDeactivation

  • #clearDeactivation(): void

  • Clear any existing deactivation workflow.

    Returns void

Private deactivate

  • deactivate(): void

  • Deactivate the tooltip from a previously hovered HTML element.

    Returns void

Private _determineDirection

  • _determineDirection(): any

  • 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

Private _setAnchor

  • _setAnchor(direction: { UP: string; DOWN: string; LEFT: string; RIGHT: string; CENTER: string }): void

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

    Parameters

    • direction: { UP: string; DOWN: string; LEFT: string; RIGHT: string; CENTER: string }

      The tooltip expansion direction specified by the element or a parent element.

      • UP: string
      • DOWN: string
      • LEFT: string
      • RIGHT: string
      • CENTER: string

    Returns void

Private _setStyle

  • _setStyle(position?: any): void

  • Apply inline styling rules to the tooltip for positioning and text alignment.

    Parameters

    • position: any = {}

    Returns void