UNPKG

5.46 kBTypeScriptView Raw
1import { AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, EventEmitter } from '@angular/core';
2import { Subject } from 'rxjs';
3import { NbComponentOrCustomStatus } from '../component-status';
4import { NbAdjustment, NbPosition, NbPositionValues, NbAdjustmentValues } from '../cdk/overlay/overlay-position';
5import { NbTrigger } from '../cdk/overlay/overlay-trigger';
6import { NbDynamicOverlay } from '../cdk/overlay/dynamic/dynamic-overlay';
7import { NbDynamicOverlayHandler } from '../cdk/overlay/dynamic/dynamic-overlay-handler';
8import { NbOverlayConfig } from '../cdk/overlay/mapping';
9import { NbTooltipComponent } from './tooltip.component';
10import { NbIconConfig } from '../icon/icon.component';
11import * as i0 from "@angular/core";
12/**
13 *
14 * Tooltip directive for small text/icon hints.
15 *
16 * ### Installation
17 *
18 * Import `NbTooltipModule` to your feature module.
19 * ```ts
20 * @NgModule({
21 * imports: [
22 * // ...
23 * NbTooltipModule,
24 * ],
25 * })
26 * export class PageModule { }
27 * ```
28 * ### Usage
29 *
30 * @stacked-example(Showcase, tooltip/tooltip-showcase.component)
31 *
32 * Tooltip can accept a hint text and/or an icon:
33 * @stacked-example(With Icon, tooltip/tooltip-with-icon.component)
34 *
35 * Same way as Popover, tooltip can accept placement position with `nbTooltipPlacement` property:
36 * @stacked-example(Placements, tooltip/tooltip-placements.component)
37 *
38 * It is also possible to specify tooltip color using `nbTooltipStatus` property:
39 * @stacked-example(Colored Tooltips, tooltip/tooltip-colors.component)
40 *
41 * Tooltip has a number of triggers which provides an ability to show and hide the component in different ways:
42 *
43 * - Click mode shows the component when a user clicks on the host element and hides when the user clicks
44 * somewhere on the document outside the component.
45 * - Hint provides capability to show the component when the user hovers over the host element
46 * and hide when the user hovers out of the host.
47 * - Hover works like hint mode with one exception - when the user moves mouse from host element to
48 * the container element the component remains open, so that it is possible to interact with it content.
49 * - Focus mode is applied when user focuses the element.
50 * - Noop mode - the component won't react to the user interaction.
51 */
52export declare class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
53 protected hostRef: ElementRef;
54 protected dynamicOverlayHandler: NbDynamicOverlayHandler;
55 protected destroy$: Subject<void>;
56 protected tooltipComponent: typeof NbTooltipComponent;
57 protected dynamicOverlay: NbDynamicOverlay;
58 context: Object;
59 /**
60 * Tooltip message
61 */
62 content: string;
63 /**
64 * Position will be calculated relatively host element based on the position.
65 * Can be top, right, bottom, left, start or end.
66 */
67 position: NbPosition;
68 static ngAcceptInputType_position: NbPositionValues;
69 /**
70 * Container position will change automatically based on this strategy if container can't fit view port.
71 * Set this property to `noop` value if you want to disable automatic adjustment.
72 * Available values: `clockwise` (default), `counterclockwise`, `vertical`, `horizontal`, `noop`.
73 */
74 get adjustment(): NbAdjustment;
75 set adjustment(value: NbAdjustment);
76 protected _adjustment: NbAdjustment;
77 static ngAcceptInputType_adjustment: NbAdjustmentValues;
78 get tooltipClass(): string;
79 set tooltipClass(value: string);
80 _tooltipClass: string;
81 /**
82 * Accepts icon name or icon config object
83 * @param {string | NbIconConfig} icon name or config object
84 */
85 set icon(icon: string | NbIconConfig);
86 /**
87 *
88 * @param {string} status
89 */
90 set status(status: NbComponentOrCustomStatus);
91 /**
92 * Describes when the container will be shown.
93 * Available options: `click`, `hover`, `hint`, `focus` and `noop`
94 * */
95 trigger: NbTrigger;
96 /**
97 * Determines tooltip overlay offset (in pixels).
98 **/
99 offset: number;
100 /** Disables the display of the tooltip. */
101 disabled: boolean;
102 nbTooltipShowStateChange: EventEmitter<{
103 isShown: boolean;
104 }>;
105 protected overlayConfig: NbOverlayConfig;
106 get isShown(): boolean;
107 constructor(hostRef: ElementRef, dynamicOverlayHandler: NbDynamicOverlayHandler);
108 ngOnInit(): void;
109 ngOnChanges(): void;
110 ngAfterViewInit(): void;
111 rebuild(): void;
112 show(): void;
113 hide(): void;
114 toggle(): void;
115 ngOnDestroy(): void;
116 protected configureDynamicOverlay(): NbDynamicOverlayHandler;
117 static ɵfac: i0.ɵɵFactoryDeclaration<NbTooltipDirective, never>;
118 static ɵdir: i0.ɵɵDirectiveDeclaration<NbTooltipDirective, "[nbTooltip]", ["nbTooltip"], { "content": { "alias": "nbTooltip"; "required": false; }; "position": { "alias": "nbTooltipPlacement"; "required": false; }; "adjustment": { "alias": "nbTooltipAdjustment"; "required": false; }; "tooltipClass": { "alias": "nbTooltipClass"; "required": false; }; "icon": { "alias": "nbTooltipIcon"; "required": false; }; "status": { "alias": "nbTooltipStatus"; "required": false; }; "trigger": { "alias": "nbTooltipTrigger"; "required": false; }; "offset": { "alias": "nbTooltipOffset"; "required": false; }; "disabled": { "alias": "nbTooltipDisabled"; "required": false; }; }, { "nbTooltipShowStateChange": "nbTooltipShowStateChange"; }, never, never, false, never>;
119}