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

{@link 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

Private #locked

#locked: { elements: Set<HTMLElement>; boundingBox: Rectangle } = ...

Maintain state about active locked tooltips in order to perform appropriate automatic dismissal.

Type declaration

  • elements: Set<HTMLElement>
  • boundingBox: Rectangle

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

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.

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; locked: boolean; content: HTMLElement }): 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; locked: boolean; content: HTMLElement } = {}

      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
      • locked: boolean
      • content: HTMLElement

    Returns void

deactivate

  • deactivate(): void

  • Deactivate the tooltip from a previously hovered HTML element.

    Returns void

clearPending

  • clearPending(): void

  • Clear any pending activation workflow.

    internal

    Returns void

lockTooltip

  • lockTooltip(): HTMLElement

  • Lock the current tooltip.

    Returns HTMLElement

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

createLockedTooltip

  • createLockedTooltip(position: { top: string; right: string; bottom: string; left: string }, text: string, [options={}]?: { cssClass: any[] }): HTMLElement

  • Create a locked tooltip at the given position.

    Parameters

    • position: { top: string; right: string; bottom: string; left: string }

      A position object with coordinates for where the tooltip should be placed

      • top: string

        Explicit top position for the tooltip

      • right: string

        Explicit right position for the tooltip

      • bottom: string

        Explicit bottom position for the tooltip

      • left: string

        Explicit left position for the tooltip

    • text: string

      Explicit tooltip text or HTML to display.

    • [options={}]: { cssClass: any[] } = {}

      Additional options which can override tooltip behavior.

      • cssClass: any[]

    Returns HTMLElement

Protected _onLockTooltip

  • _onLockTooltip(event: MouseEvent): void

  • Handle a request to lock the current tooltip.

    Parameters

    • event: MouseEvent

      The click event.

    Returns void

Protected _onLockedTooltipDismiss

  • _onLockedTooltipDismiss(event: MouseEvent): void

  • Handle dismissing a locked tooltip.

    Parameters

    • event: MouseEvent

      The click event.

    Returns void

Protected _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

Protected _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

Protected _setStyle

  • _setStyle(position?: any): void

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

    Parameters

    • position: any = {}

    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 #computeLockedBoundingBox

  • #computeLockedBoundingBox(): void

  • Compute the unified bounding box from the set of locked tooltip elements.

    Returns void

Private #testLockedTooltipProximity

  • #testLockedTooltipProximity(event: MouseEvent): void

  • Check whether the user is moving away from the locked tooltips and dismiss them if so.

    Parameters

    • event: MouseEvent

      The mouse move event.

    Returns void