import { KbqToolTipModule } from '@koobiq/components/tooltip';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.
Selector: kbq-tooltip-component
| Name | Description |
|---|---|
| arrow: boolean | |
| changeDetectorRef: ChangeDetectorRef | |
| classMap: {} | |
| closeOnInteraction: boolean | |
| content: string | TemplateRef |
|
| context: { $implicit: any; } | |
| defaultPaddings: boolean | |
| destroyRef: DestroyRef | |
| elementRef: ElementRef |
|
| header: string | TemplateRef |
|
| hovered: BehaviorSubject |
Stream that emits when the popup item is hovered. |
| offset: number | |
| onHideSubject: Subject |
Subject for notifying that the tooltip has been hidden from the view |
| prefix: string | |
| renderer: Renderer2 | |
| trigger: KbqPopUpTrigger |
|
| visibility: PopUpVisibility | |
| visibleChange: EventEmitter |
|
| warning: boolean |
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.
Selector: [kbqTooltip]
Exported as: kbqTooltip| Name | Description |
|---|---|
@Input('kbqTooltipArrow')
arrow: boolean
|
Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`. |
@Input('kbqTooltipColor')
color: string
|
Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class. |
@Input('kbqTooltip')
content: string | TemplateRef |
Input (`kbqTooltip`) with the tooltip content — a string or a template. Updating it refreshes an open tooltip. |
@Input('kbqTooltipContext')
context: any
|
Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip. |
@Input('kbqTooltipClass')
customClass: string
|
Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map. |
@Input('kbqTooltipDisabled')
disabled: boolean
|
Input (`kbqTooltipDisabled`) controlling whether the tooltip is disabled; setting it to `true` hides it. |
@Input('kbqEnterDelay')
enterDelay: number
|
Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`. |
@Input() forDisabledComponent: InputSignal |
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. |
@Input('kbqTooltipHeader')
header: string | TemplateRef |
Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`. |
@Input() hideWithTimeout: boolean
|
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. |
@Input() ignoreTooltipPointerEvents: InputSignal |
Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`. |
@Input('kbqLeaveDelay')
leaveDelay: number
|
Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`. |
@Input('kbqTooltipModifier')
modifier: "default" | "warning" | TooltipModifier | "extended"
|
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`). |
@Input('kbqTooltipOffset')
offset: number
|
Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default. |
@Input('kbqRelativeToPointer')
relativeToPointer: boolean
|
Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority. |
@Input('kbqTooltipSingleInstance')
singleInstance: InputSignalWithTransform |
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. |
@Input('kbqPlacement')
tooltipPlacement: "top" | "topLeft" | "topRight" | "right" | "rightTop" | "rightBottom" | "left" | "leftTop" | "leftBottom" | "bottom" | "bottomLeft" | "bottomRight"
|
Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`. |
@Input('kbqPlacementPriority')
tooltipPlacementPriority: string | string[]
|
Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`. |
@Input('kbqVisible')
tooltipVisible: boolean
|
Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state. |
@Input('kbqTrigger')
trigger: string
|
Input (`kbqTrigger`) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners. |
@Output('kbqPlacementChange')
placementChange: EventEmitter |
Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions. |
@Output('kbqVisibleChange')
visibleChange: EventEmitter |
Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes. |
| isOpen: boolean | Whether the pop-up overlay is currently open. |
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>;
const KBQ_TOOLTIP_OPEN_TIME: InjectionToken<{ value: number; }>;
const MIN_TIME_FOR_DELAY: number;
const KBQ_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;