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