1 | import * as Popper from '@popperjs/core';
|
2 | import BaseComponent, { GetInstanceFactory, GetOrCreateInstanceFactory } from './base-component';
|
3 |
|
4 | declare class Tooltip extends BaseComponent {
|
5 | static getInstance: GetInstanceFactory<Tooltip>;
|
6 |
|
7 | |
8 |
|
9 |
|
10 |
|
11 | static getOrCreateInstance: GetOrCreateInstanceFactory<Tooltip>;
|
12 |
|
13 | static jQueryInterface: Tooltip.jQueryInterface;
|
14 |
|
15 | static NAME: 'tooltip';
|
16 |
|
17 | |
18 |
|
19 |
|
20 |
|
21 |
|
22 | static Default: Tooltip.Options;
|
23 |
|
24 | static Event: Record<
|
25 | | 'CLICK'
|
26 | | 'FOCUSIN'
|
27 | | 'FOCUSOUT'
|
28 | | 'HIDDEN'
|
29 | | 'HIDE'
|
30 | | 'INSERTED'
|
31 | | 'MOUSEENTER'
|
32 | | 'MOUSELEAVE'
|
33 | | 'SHOW'
|
34 | | 'SHOWN',
|
35 | string
|
36 | >;
|
37 |
|
38 | static DefaultType: Record<keyof Tooltip.Options, string>;
|
39 | constructor(element: string | Element, options?: Partial<Tooltip.Options>);
|
40 |
|
41 | /**
|
42 | * Reveals an element’s tooltip. Returns to the caller before the
|
43 | * tooltip has actually been shown (i.e. before the shown.bs.tooltip
|
44 | * event occurs). This is considered a “manual” triggering of the
|
45 | * tooltip. Tooltips with zero-length titles are never displayed.
|
46 | */
|
47 | show(): void;
|
48 |
|
49 | /**
|
50 | * Hides an element’s tooltip. Returns to the caller before the tooltip
|
51 | * has actually been hidden (i.e. before the hidden.bs.tooltip event
|
52 | * occurs). This is considered a “manual” triggering of the tooltip.
|
53 | */
|
54 | hide(): void;
|
55 |
|
56 | /**
|
57 | * Toggles an element’s tooltip. Returns to the caller before the
|
58 | * tooltip has actually been shown or hidden (i.e. before the
|
59 | * shown.bs.tooltip or hidden.bs.tooltip event occurs). This is
|
60 | * considered a “manual” triggering of the tooltip.
|
61 | */
|
62 | toggle(event?: any): void;
|
63 |
|
64 | /**
|
65 | * Gives an element’s tooltip the ability to be shown. Tooltips are
|
66 | * enabled by default.
|
67 | */
|
68 | enable(): void;
|
69 |
|
70 | /**
|
71 | * Removes the ability for an element’s tooltip to be shown. The tooltip
|
72 | * will only be able to be shown if it is re-enabled.
|
73 | */
|
74 | disable(): void;
|
75 |
|
76 | /**
|
77 | * Toggles the ability for an element’s tooltip to be shown or hidden.
|
78 | */
|
79 | toggleEnabled(): void;
|
80 |
|
81 | /**
|
82 | * Updates the position of an element’s tooltip.
|
83 | */
|
84 | update(): void;
|
85 | }
|
86 |
|
87 | declare namespace Tooltip {
|
88 | enum Events {
|
89 | |
90 |
|
91 |
|
92 | show = 'show.bs.tooltip',
|
93 |
|
94 | |
95 |
|
96 |
|
97 |
|
98 | shown = 'shown.bs.tooltip',
|
99 |
|
100 | |
101 |
|
102 |
|
103 |
|
104 | hide = 'hide.bs.tooltip',
|
105 |
|
106 | |
107 |
|
108 |
|
109 |
|
110 | hidden = 'hidden.bs.tooltip',
|
111 |
|
112 | |
113 |
|
114 |
|
115 |
|
116 | inserted = 'inserted.bs.tooltip',
|
117 | }
|
118 |
|
119 | type Offset = [number, number];
|
120 |
|
121 | type OffsetFunction = () => Offset;
|
122 |
|
123 | type PopperConfigFunction = (defaultBsPopperConfig: Options) => Partial<Popper.Options>;
|
124 |
|
125 | interface Options {
|
126 | |
127 |
|
128 |
|
129 |
|
130 |
|
131 | animation: boolean;
|
132 |
|
133 | |
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 | container: string | Element | false;
|
143 |
|
144 | |
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | delay: number | { show: number; hide: number };
|
153 |
|
154 | |
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 | html: boolean;
|
166 |
|
167 | |
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 | placement: 'auto' | 'top' | 'bottom' | 'left' | 'right' | (() => void);
|
179 |
|
180 | /**
|
181 | * If a selector is provided, tooltip objects will be delegated to the
|
182 | * specified targets. In practice, this is used to also apply tooltips
|
183 | * to dynamically added DOM elements (jQuery.on support).
|
184 | *
|
185 | * @default false
|
186 | */
|
187 | selector: string | false;
|
188 |
|
189 | /**
|
190 | * Base HTML to use when creating the tooltip.
|
191 | *
|
192 | * The tooltip's title will be injected into the .tooltip-inner.
|
193 | *
|
194 | * .tooltip-arrow will become the tooltip's arrow.
|
195 | *
|
196 | * The outermost wrapper element should have the .tooltip class and
|
197 | * role="tooltip".
|
198 | *
|
199 | * @default '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
|
200 | */
|
201 | template: string;
|
202 |
|
203 | /**
|
204 | * Default title value if title attribute isn't present.
|
205 | *
|
206 | * If a function is given, it will be called with its this reference set
|
207 | * to the element that the popover is attached to.
|
208 | *
|
209 | * @default ''
|
210 | */
|
211 | title: string | Element | ((this: HTMLElement) => string);
|
212 |
|
213 | /**
|
214 | * How tooltip is triggered - click | hover | focus | manual. You may
|
215 | * pass multiple triggers; separate them with a space.
|
216 | *
|
217 | * 'manual' indicates that the tooltip will be triggered
|
218 | * programmatically via the .tooltip('show'), .tooltip('hide') and
|
219 | * .tooltip('toggle') methods; this value cannot be combined with any
|
220 | * other trigger.
|
221 | *
|
222 | * 'hover' on its own will result in tooltips that cannot be triggered
|
223 | * via the keyboard, and should only be used if alternative methods for
|
224 | * conveying the same information for keyboard users is present.
|
225 | *
|
226 | * @default 'hover focus'
|
227 | */
|
228 | trigger:
|
229 | | 'click'
|
230 | | 'hover'
|
231 | | 'focus'
|
232 | | 'manual'
|
233 | | 'click hover'
|
234 | | 'click focus'
|
235 | | 'hover focus'
|
236 | | 'click hover focus';
|
237 |
|
238 | /**
|
239 | * Offset of the tooltip relative to its target.
|
240 | *
|
241 | * When a function is used to determine the offset, it is called with an
|
242 | * object containing the popper placement, the reference, and popper
|
243 | * rects as its first argument. The triggering element DOM node is
|
244 | * passed as the second argument. The function must return an array with
|
245 | * two numbers: [skidding, distance].
|
246 | *
|
247 | * @see {@link https://popper.js.org/docs/v2/modifiers/offset}
|
248 | * @default [0, 0]
|
249 | */
|
250 | offset: Offset | string | OffsetFunction;
|
251 |
|
252 | /**
|
253 | * Allow to specify which position Popper will use on fallback.
|
254 | *
|
255 | * @see {@link https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements}
|
256 | * @default ['top', 'right', 'bottom', 'left']
|
257 | */
|
258 | fallbackPlacement: string[];
|
259 |
|
260 | /**
|
261 | * Overflow constraint boundary of the popover. Accepts the values of
|
262 | * 'viewport', 'window', 'scrollParent', or an HTMLElement reference
|
263 | * (JavaScript only).
|
264 | *
|
265 | * @see {@link https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement}
|
266 | * @default 'scrollParent'
|
267 | */
|
268 | boundary: Popper.Boundary;
|
269 |
|
270 | /**
|
271 | * Add classes to the tooltip when it is shown. Note that these classes
|
272 | * will be added in addition to any classes specified in the template.
|
273 | * To add multiple classes, separate them with spaces: 'class-1
|
274 | * class-2'.
|
275 | *
|
276 | * You can also pass a function that should return a single string
|
277 | * containing additional class names.
|
278 | *
|
279 | * @default ''
|
280 | */
|
281 | customClass?: string | (() => string) | undefined;
|
282 |
|
283 | /**
|
284 | * Enable or disable the sanitization. If activated 'template' and
|
285 | * 'title' options will be sanitized.
|
286 | *
|
287 | * @default true
|
288 | */
|
289 | sanitize: boolean;
|
290 |
|
291 | /**
|
292 | * Object which contains allowed attributes and tags
|
293 | *
|
294 | * @see {@link https://v5.getbootstrap.com/docs/5.0/getting-started/javascript/#sanitizer}
|
295 | */
|
296 | allowList: Record<keyof HTMLElementTagNameMap, string[]>;
|
297 |
|
298 | /**
|
299 | * Here you can supply your own sanitize function. This can be useful if
|
300 | * you prefer to use a dedicated library to perform sanitization.
|
301 | *
|
302 | * @default null
|
303 | */
|
304 | sanitizeFn: () => void | null;
|
305 |
|
306 | |
307 |
|
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 | popperConfig: Partial<Popper.Options> | PopperConfigFunction | null;
|
319 | }
|
320 |
|
321 | type jQueryInterface = (
|
322 | config?:
|
323 | | Partial<Options>
|
324 | | 'show'
|
325 | | 'hide'
|
326 | | 'toggle'
|
327 | | 'enable'
|
328 | | 'disable'
|
329 | | 'toggleEnabled'
|
330 | | 'update'
|
331 | | 'dispose',
|
332 | ) => void;
|
333 | }
|
334 |
|
335 | export default Tooltip;
|