import { KbqToolTipModule } from '@koobiq/components/tooltip';@Component({ selector: 'kbq-tooltip-component' })
class KbqTooltipComponent extends KbqPopUp {
prefix: string;
get elementRef(): ElementRef<HTMLElement>;
readonly destroyRef: DestroyRef;
readonly hovered: Signal<boolean>;
trigger: KbqPopUpTrigger<unknown>;
header: string | TemplateRef<unknown>;
content: string | TemplateRef<unknown>;
context: { $implicit: unknown } | null;
classMap: {};
arrow: boolean;
arrowCentered: boolean;
defaultPaddings: boolean;
offset: number | null;
visibility: PopUpVisibility;
visibleChange: EventEmitter<boolean>;
show(delay: number): void;
updateClassMap(
placement: string,
customClass: string,
{ modifier }: { modifier: KbqEnumValues<TooltipModifier> }
): void;
isTemplateRef(value: any): boolean;
hide(delay: number): void;
isVisible(): boolean;
afterHidden(): Observable<void>;
detectChanges(): void;
}elementRefElementRef<HTMLElement> The tooltip panel, which the base pop-up measures and decorates instead of the host.
hoveredSignal<boolean> Whether the pointer is over the pop-up.
classMap{} CSS classes of the pop-up element: the placement, the custom class and the modifiers of the subclass.
arrowCenteredboolean Whether the arrow points at the origin center while the panel keeps its placement. Defaults to false.
visibilityPopUpVisibility Stage of the pop-up's life: not shown yet, visible, or hidden.
hide()void Hides the popup after a specified delay.
The hide timeout triggers the hiding of the popup by updating visibility and emitting relevant events.
delaynumber The delay in milliseconds before hiding the popup.
afterHidden()Observable<void> Returns an observable that notifies when the tooltip has been hidden from view.
Trigger directive that shows a KbqTooltipComponent for its host element. Extends KbqPopUpTrigger with
tooltip-specific inputs (content, placement, color, arrow, enter/leave delays, modifier and header) and
behavior such as opening on keyboard focus only and positioning relative to the mouse cursor.
@Directive({ selector: '[kbqTooltip]', exportAs: 'kbqTooltip' })
class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements KbqExclusiveTooltip {
readonly forDisabledComponent = input<Record<'disabledSignal', WritableSignal<boolean>>>();
readonly ignoreTooltipPointerEvents = input<boolean>(false);
readonly singleInstance = input<boolean>(
inject(KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT),
{ alias: 'kbqTooltipSingleInstance' }
);
hideWithTimeout = input<boolean | undefined>();
tooltipVisible: boolean;
tooltipPlacement: KbqPopUpPlacementValues;
relativeToPointer: boolean;
relativeToCaret: boolean;
relativeToCaretVertical: KbqCaretVerticalAnchor;
tooltipPlacementPriority: string | string[] | null;
content: string | TemplateRef<unknown>;
disabled: boolean;
enterDelay: number;
leaveDelay: number;
trigger: string;
customClass: string;
context: unknown;
color: KbqComponentColors | string;
arrow: boolean;
arrowCentered: boolean;
offset: number | null;
readonly placementChange: EventEmitter<KbqPopUpPlacementValues>;
readonly visibleChange: EventEmitter<boolean>;
modifier: KbqEnumValues<TooltipModifier>;
header: string | TemplateRef<unknown>;
isOpen: boolean;
get isAttached(): boolean;
get openedChange(): Observable<boolean>;
show(delay?: number): void;
hide(delay?: number): void;
showForMouseEvent(event: MouseEvent): void;
showForElement(element: HTMLElement): void;
updateOrigin(origin: KbqOverlayOrigin | null): void;
}forDisabledComponentRecord<'disabledSignal', WritableSignal<boolean>> Input for controlling the disabled state of a component.
The input expects a component containing disabledSignal property, which is
a writable signal emitting boolean values.
ignoreTooltipPointerEventsboolean Determines whether pointer events should be ignored on tooltips.
When set to true, the tooltip pane does not receive pointer events, so clicks and hovers pass through
to whatever is underneath it. Defaults to false, which keeps the tooltip hoverable: a user who needs
more time to read it — or who reads at high magnification, where the pointer often ends up over the
tooltip itself — can move the pointer onto it without it disappearing (WCAG 1.4.13 "Content on Hover").
Set it to true for tooltips that float over other click targets, such as the overflow hints of a
scrolling option list.
kbqTooltipSingleInstanceboolean Whether the tooltip takes part in the "only one tooltip is visible at a time" group: showing it hides the previously visible tooltip, and it is hidden when another tooltip is shown.
Defaults to true; the default can be changed application-wide with the
KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT token.
Tooltips without an interactive kbqTrigger (manual, none, …) never take part in the group,
regardless of this input — they are shown imperatively and are expected to stay pinned.
hideWithTimeoutboolean | undefined Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.
tooltipVisibleboolean Input (kbqVisible) that programmatically shows or hides the tooltip; reflects the current visible state.
tooltipPlacementKbqPopUpPlacementValues Input (kbqPlacement) that sets the tooltip placement relative to its trigger; reflects the current placement.
relativeToPointerboolean Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
relativeToCaretboolean Positions the tooltip relative to the text caret of the field it is attached to, following it while the user types, moves the caret and scrolls the field. Anchors to the selection whenever there is one.
Every placement is available, unlike with kbqRelativeToPointer: the caret is anchored as a rectangle,
so the usual fallback placements keep the tooltip on screen. Wins when both inputs are enabled.
The field is the host element itself when it is editable, otherwise the first editable it wraps.
relativeToCaretVerticalKbqCaretVerticalAnchor What the tooltip is vertically anchored to while kbqRelativeToCaret is enabled.
tooltipPlacementPrioritystring | string[] | null Input (kbqPlacementPriority) that sets the ordered fallback placements; reflects the current placementPriority.
contentstring | TemplateRef<unknown> Input (kbqTooltip) with the tooltip content — a string or a template. Updating it refreshes an open tooltip.
disabledboolean Input (kbqTooltipDisabled) controlling whether the tooltip is disabled; setting it to true hides it.
undefined leaves the decision to the trigger, like an unset input.
Reads back the effective state, which for triggers that derive one of their own (see
derivedDisabledWins) is not necessarily the value that was written.
enterDelaynumber Input (kbqEnterDelay) — delay in milliseconds before the tooltip is shown. Defaults to 400.
leaveDelaynumber Input (kbqLeaveDelay) — delay in milliseconds before the tooltip is hidden. Defaults to 0.
triggerstring Input (kbqTrigger) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners.
customClassstring Input (kbqTooltipClass) with an extra CSS class applied to the tooltip; updating it refreshes the class map.
contextunknown Input (kbqTooltipContext) with the context object passed to a template tooltip; updating it refreshes the open tooltip.
colorKbqComponentColors | string Input (kbqTooltipColor) with the tooltip color theme. Defaults to KbqComponentColors.Contrast.
arrowboolean Input (kbqTooltipArrow) — whether to render the tooltip's arrow/pointer. Defaults to false.
arrowCenteredboolean Input (kbqTooltipArrowCentered) — centers the arrow on the trigger while preserving the panel placement.
Requires a visible arrow. Defaults to false.
offsetnumber | null Input (kbqTooltipOffset) — distance in pixels between the tooltip and its trigger. null keeps
the gap of the stylesheet. Defaults to the offset of KBQ_TOOLTIP_DEFAULT_OPTIONS, when a
provider in scope set one. Inside a provider scope such as the navbar's, null/undefined restores
that inherited default.
placementChangeEventEmitter<KbqPopUpPlacementValues> Output (kbqPlacementChange) that emits the new placement whenever the tooltip repositions.
visibleChangeEventEmitter<boolean> Output (kbqVisibleChange) that emits when the tooltip's visibility changes.
modifierKbqEnumValues<TooltipModifier> Visual variant of the tooltip. Accepts 'default' | 'warning' | 'extended'.
Replaces the removed KbqWarningTooltipTrigger and KbqExtendedTooltipTrigger
subclasses — to render a warning tooltip use kbqTooltipModifier="warning",
and kbqTooltipModifier="extended" for the extended variant (combine with kbqTooltipHeader).
headerstring | TemplateRef<unknown> Header text or template, rendered above the tooltip content. Only meaningful with
kbqTooltipModifier="extended". Replaces the removed KbqExtendedTooltipTrigger.header.
isOpenboolean Whether the pop-up overlay is currently open.
isAttachedboolean Whether the pop-up overlay is currently attached.
Unlike isOpen, which follows the visibility of the pop-up component and therefore lags a task behind
show()/hide(), this flips synchronously — it is the window during which the overlay (and its
backdrop) is present in the DOM. Part of the KbqSiblingPopup contract.
openedChangeObservable<boolean> Emits true when the pop-up opens and false when it closes. Part of the KbqSiblingPopup contract.
show()void Shows the tooltip after delay ms. Suppresses showing while a pop-up on the same element holds the
anchor or on a focus trigger that did not originate from the keyboard, and applies cursor-relative
positioning when relativeToPointer is enabled.
hide()void Hides the tooltip after delay ms and, when the user has genuinely left the host, un-mutes a tooltip
that a pop-up on the same element had muted.
mouseleave and blur are the release signals because the base class binds hide to both regardless
of whether the tooltip is currently visible. A pop-up that is still attached does not count: its
backdrop steals the hover from the trigger while the pointer stands still, and that mouseleave must
not be mistaken for the user leaving.
showForMouseEvent()void Shows the tooltip next to the cursor position of the given mouse event, anchoring it to the event's
currentTarget instead of the directive's own host element.
Use it when the trigger cannot be declared in the template — for instance for a tooltip shared by the cells of a virtualized table. The directive still has to be created in an injection context.
showForElement()void Shows the tooltip anchored to the given element instead of the directive's own host element.
Use it when the trigger cannot be declared in the template. The directive still has to be created in an injection context:
const tooltip = runInInjectionContext(injector, () => new KbqTooltipTrigger());
tooltip.showForElement(element);Does nothing while the tooltip is disabled or has no content — there is no overlay to anchor then.
updateOrigin()void Positions the pop-up against origin — an element, or a rectangle in viewport coordinates such as the one
kbqCreateCaretOrigin keeps on the caret — instead of the host element; null restores the host
element. An open pop-up moves to the new origin at once.
This moves the position origin only. setExternalNativeElement moves the host itself, and with it
the trigger's event listeners, its focus target and the scroll containers the pop-up follows.
Remembers when a tooltip was last shown, so that moving between neighbouring triggers does not replay the
enter delay for every one of them: the first tooltip waits kbqEnterDelay, the ones following it within
KBQ_TOOLTIP_INSTANT_SHOW_WINDOW appear instantly.
Application-wide by design — the behavior is part of the component's documented delay rules.
@Injectable({ providedIn: 'root' })
class KbqTooltipDelayTracker {
shouldSkipEnterDelay(): boolean;
markShown(): void;
reset(): void;
}shouldSkipEnterDelay()boolean Whether the tooltip that is about to be shown should skip its enter delay.
markShown()void Records that a tooltip has just been shown.
reset()void Forgets the last shown tooltip, so the next one appears with its full enter delay.
Keeps track of the single tooltip that is currently visible, so that showing a new one hides the previous. Holds the trigger, not the overlay component — the latter is re-created on every show.
@Injectable({ providedIn: 'root' })
class KbqTooltipRegistry {
setVisible(tooltip: KbqExclusiveTooltip): void;
clearVisible(tooltip: KbqExclusiveTooltip): void;
}setVisible()void Marks the tooltip as the only visible one, hiding the previously visible tooltip.
clearVisible()void Clears the registry, but only when the given tooltip is still the registered one. The guard
matters because hiding the previous tooltip is asynchronous: its visibleChange(false) arrives
after the new tooltip has already been registered, and must not wipe that newer entry.
What the tooltip is vertically anchored to when it is positioned relative to the caret:
'line' — the line of text the caret is on.'field' — the whole field, so the tooltip never covers it; horizontally it still follows the caret.'auto' — 'field' for a single-line <input>, 'line' for everything else.type KbqCaretVerticalAnchor = 'auto' | 'line' | 'field';Default options inherited by every tooltip in the token's scope. A bound input still wins: kbqTooltipOffset
overrides offset, and a binding that changes to undefined restores the inherited value.
interface KbqTooltipDefaultOptions {
readonly offset?: number | null;
readonly panelClass?: string | string[];
}offsetnumber | null Distance in pixels between the tooltip and its trigger, used while kbqTooltipOffset is not bound.
null keeps the gap of the stylesheet.
panelClassstring | string[] Extra CSS class applied to the tooltip's overlay panel.
enum TooltipModifier {
Default = 'default',
Warning = 'warning',
Extended = 'extended'
}Length in milliseconds of the window during which a tooltip shown right after another one appears
instantly. Defaults to MIN_TIME_FOR_DELAY.
const KBQ_TOOLTIP_INSTANT_SHOW_WINDOW: InjectionToken<number>;Replaced by KbqTooltipDelayTracker, which owns the shared timestamp behind a service
instead of a mutable useValue object. The tooltip no longer reads this token; providing it has no effect. Will be
removed in 22.0.0.
const KBQ_TOOLTIP_OPEN_TIME: InjectionToken<{ value: number }>;const KBQ_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;Default value of the kbqTooltipSingleInstance input. Provide false at the application level to
globally disable the "only one tooltip is visible at a time" behavior.
const KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT: InjectionToken<boolean>;Default length of the window during which a following tooltip is shown without its enter delay.
const MIN_TIME_FOR_DELAY: number;