TooltipManager

Summary

The TooltipManager class manages the creation, display, and positioning of tooltips for specified trigger elements on a webpage. It handles various configurations, including delays, placements, and content extraction, ensuring tooltips are displayed correctly based on user interactions.

Example Usage

const tooltipManager = new TooltipManager();
tooltipManager.init({
  tooltipDelay: 300, // general delay for both show and hide
  tooltipPlacement: "bottom-end", // general placement
});

Code Analysis

Main functionalities

• Automatically initialize tooltips on specified elements.
• Resolve and merge settings for tooltip behavior.
• Collect unique trigger elements and manage their tooltips.
• Create and sanitize tooltip elements based on various content sources.
• Register events to show and hide tooltips based on user interactions.
• Compute and update tooltip positions dynamically.

---

Methods

• resolveSettings(settings, mergeSettings): Updates the settings of the instance.
• collectUniqueTriggers(): Collects unique trigger elements based on predefined selectors.
• getArrowElement(tooltip): Retrieves the arrow element from a tooltip.
• createTooltipArrowAndAppend(floatEl): Creates and appends an arrow element to a tooltip.
• resolveTooltipFromContent(refEl, triggerContent, state, dryrun): Resolves tooltip content from the trigger element.
• resolveTooltipDelay(refEl, ttEl): Determines the show and hide delays for a tooltip.
• resolvetooltipPlacement(refEl, ttEl): Determines the placement of a tooltip.
• registerEvents(refEl, ttEl, entry): Registers events to show and hide tooltips.
• createCollectionAndRegisterEvents(refEls): Processes trigger elements and registers events.
• init(settings, mergeSettings): Initializes the tooltip manager with optional settings.
• showTooltip($event): Displays the tooltip for the trigger element.
• hideTooltip($event): Hides the tooltip for the trigger element.
• update({ event, tooltipEl, entry }): Updates the position and appearance of the tooltip.

---

Fields

• triggerCollection: A map to store tooltip entries.
• triggerSelector: An array of selectors for trigger elements.
• tooltipChildValidClassList: Valid class names for tooltip content elements.
• tooltipClassList: Class names to be added to tooltip elements.
• tooltipArrowClassList: Class names for tooltip arrow elements.
• tooltipDelay: Default delay for showing and hiding tooltips.
• tooltipShowDelay: Custom delay for showing tooltips.
• tooltipHideDelay: Custom delay for hiding tooltips.
• tooltipPlacement: Default placement for tooltips.

---