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>

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, options?): void
Activate the tooltip for a hovered HTML element which defines a tooltip localization key.
Parameters
- element: HTMLElement
  The HTML element being hovered.
- Optional 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
    Explicit tooltip text to display. If this is not provided the tooltip text is acquired from the elements data-tooltip attribute. This text will be automatically localized
  - direction: {
        UP: string;
        DOWN: string;
        LEFT: string;
        RIGHT: string;
        CENTER: string;
    }
    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.
    - UP: string
    - DOWN: string
    - LEFT: string
    - RIGHT: string
    - CENTER: string
  - cssClass: 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.
  - locked: boolean
    An optional boolean to lock the tooltip after creation. Defaults to false.
  - content: HTMLElement
    Explicit HTML content to inject into the tooltip rather than using tooltip text.
Returns void

deactivate

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

Returns void

clearPending

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

Returns void

lockTooltip

lockTooltip(): HTMLElement
Lock the current tooltip.

Returns HTMLElement

dismissLockedTooltip

dismissLockedTooltip(element): 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, text, options?): 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.
- Optional options: {
  cssClass: array;
  } = {}
  Additional options which can override tooltip behavior.
  - cssClass: array
    An optional, space-separated list of CSS classes to apply to the activated tooltip.
Returns HTMLElement

`Protected` _onLockTooltip

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

`Protected` _onLockedTooltipDismiss

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

`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` _setAnchor

_setAnchor(direction): void
Protected
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?): void
Protected
Apply inline styling rules to the tooltip for positioning and text alignment.
Parameters
- Optional position: object = {}
  An object of positioning data, supporting top, right, bottom, left, and textAlign
Returns void

`Private` #onActivate

#onActivate(event): void
Handle hover events which activate a tooltipped element.
Parameters
- event: PointerEvent
  The initiating pointerenter event
Returns void

`Private` #onDeactivate

#onDeactivate(event): 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): 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

Class TooltipManager

See

Example: API Usage

Example: HTML Usage

Index

Properties

Methods

Properties

tooltip

element

Private #active

Private #activationTimeout

Private #deactivationTimeout

Private #pending

Private #locked

Type declaration

elements: Set<HTMLElement>

boundingBox: Rectangle

Static TOOLTIP_MARGIN_PX

Static TOOLTIP_ACTIVATION_MS

Static TOOLTIP_DIRECTIONS

Type declaration

UP: string

DOWN: string

LEFT: string

RIGHT: string

CENTER: string

Static LOCKED_TOOLTIP_BUFFER_PX

Methods

activateEventListeners

Returns void

activate

Parameters

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

Returns void

clearPending

Returns void

lockTooltip

Returns HTMLElement

dismissLockedTooltip

Parameters

Returns void

dismissLockedTooltips

Returns void

createLockedTooltip

Parameters

top: string

right: string

bottom: string

left: string

cssClass: array

Returns HTMLElement

Protected _onLockTooltip

Parameters

Returns void

Protected _onLockedTooltipDismiss

Parameters

Returns void

Protected _determineDirection

Returns any

Protected _setAnchor

Parameters

UP: string

DOWN: string

LEFT: string

RIGHT: string

CENTER: string

Returns void

Protected _setStyle

`Private` #active

`Private` #activationTimeout

`Private` #deactivationTimeout

`Private` #pending

`Private` #locked

`Static` TOOLTIP_MARGIN_PX

`Static` TOOLTIP_ACTIVATION_MS

`Static` TOOLTIP_DIRECTIONS

`Static` LOCKED_TOOLTIP_BUFFER_PX

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

`Protected` _onLockTooltip

`Protected` _onLockedTooltipDismiss

`Protected` _determineDirection

`Protected` _setAnchor

`Protected` _setStyle

`Private` #onActivate

`Private` #onDeactivate

`Private` #startDeactivation

`Private` #clearDeactivation

`Private` #computeLockedBoundingBox

`Private` #testLockedTooltipProximity