Tooltip component

The <day-tooltip> with the DAYTooltipTriggerDirective form an advanced, customizable tooltip system in Angular, handling positioning, sizing, animations, and dynamic behavior based on configuration.

Dependencies

'/core'

Import

import { DAYTooltipComponent } from '/tooltip';
import { DAYTooltipTriggerDirective } from '/tooltip';

Selectors

Tooltip: day-tooltip

Tooltip directive: [DAYTooltip]

Installation and Usage

npm install @dayerlin-bustamante/tooltip

import { DAYTooltipComponent, DAYTooltipTriggerDirective } from '@dayerlin-bustamante/tooltip';

<day-tooltip [text]="'Hello'">
    <span [DAYTooltip]="'Hello'">Hover me</span>
</day-tooltip>

Inputs directive

Output

Directives

The DAYTooltipTriggerDirective ([DAYTooltip]) attaches to any element to handle tooltip display and lifecycle. It merges default settings with optional inputs (DAYTooltipConfig, DAYTooltipBondedElement) and reacts to mouse events to show either a classic hover tooltip or a cursor-following title. Tooltips are created via DAYTooltipService and tracked through DAYDialogRef, while reactive primitives (computed, BehaviorSubject, effect) and takeUntilDestroyed ensure dynamic configuration, customizable delays, and safe cleanup.

Public methods

Example

Description

The DAYTooltip system combines a directive and a container component to deliver a reactive, customizable tooltip in Angular.

• The directive manages user interactions (mouseenter, mouseleave, mousemove) and creates/destroys tooltips via DAYTooltipService.
• The container handles rendering, positioning, and animations, using signals, ResizeObserver, and CSS variables for dynamic sizing and alignment.
• Supports two modes: classic tooltip (hover-based) and floating title (cursor-follow).
• Positioning logic ensures viewport fit (top, bottom, left, center, right) with bonded element support.
• Animations are powered by Angular’s AnimationBuilder with fade in/out effects.
• State and cleanup are managed reactively with BehaviorSubject, computed, and takeUntilDestroyed