1 | /**
|
---|
2 | * --------------------------------------------------------------------------
|
---|
3 | * Bootstrap (v5.1.3): tooltip.js
|
---|
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
---|
5 | * --------------------------------------------------------------------------
|
---|
6 | */
|
---|
7 |
|
---|
8 | import * as Popper from '@popperjs/core'
|
---|
9 |
|
---|
10 | import {
|
---|
11 | defineJQueryPlugin,
|
---|
12 | findShadowRoot,
|
---|
13 | getElement,
|
---|
14 | getUID,
|
---|
15 | isElement,
|
---|
16 | isRTL,
|
---|
17 | noop,
|
---|
18 | typeCheckConfig
|
---|
19 | } from './util/index'
|
---|
20 | import { DefaultAllowlist, sanitizeHtml } from './util/sanitizer'
|
---|
21 | import Data from './dom/data'
|
---|
22 | import EventHandler from './dom/event-handler'
|
---|
23 | import Manipulator from './dom/manipulator'
|
---|
24 | import SelectorEngine from './dom/selector-engine'
|
---|
25 | import BaseComponent from './base-component'
|
---|
26 |
|
---|
27 | /**
|
---|
28 | * ------------------------------------------------------------------------
|
---|
29 | * Constants
|
---|
30 | * ------------------------------------------------------------------------
|
---|
31 | */
|
---|
32 |
|
---|
33 | const NAME = 'tooltip'
|
---|
34 | const DATA_KEY = 'bs.tooltip'
|
---|
35 | const EVENT_KEY = `.${DATA_KEY}`
|
---|
36 | const CLASS_PREFIX = 'bs-tooltip'
|
---|
37 | const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
|
---|
38 |
|
---|
39 | const DefaultType = {
|
---|
40 | animation: 'boolean',
|
---|
41 | template: 'string',
|
---|
42 | title: '(string|element|function)',
|
---|
43 | trigger: 'string',
|
---|
44 | delay: '(number|object)',
|
---|
45 | html: 'boolean',
|
---|
46 | selector: '(string|boolean)',
|
---|
47 | placement: '(string|function)',
|
---|
48 | offset: '(array|string|function)',
|
---|
49 | container: '(string|element|boolean)',
|
---|
50 | fallbackPlacements: 'array',
|
---|
51 | boundary: '(string|element)',
|
---|
52 | customClass: '(string|function)',
|
---|
53 | sanitize: 'boolean',
|
---|
54 | sanitizeFn: '(null|function)',
|
---|
55 | allowList: 'object',
|
---|
56 | popperConfig: '(null|object|function)'
|
---|
57 | }
|
---|
58 |
|
---|
59 | const AttachmentMap = {
|
---|
60 | AUTO: 'auto',
|
---|
61 | TOP: 'top',
|
---|
62 | RIGHT: isRTL() ? 'left' : 'right',
|
---|
63 | BOTTOM: 'bottom',
|
---|
64 | LEFT: isRTL() ? 'right' : 'left'
|
---|
65 | }
|
---|
66 |
|
---|
67 | const Default = {
|
---|
68 | animation: true,
|
---|
69 | template: '<div class="tooltip" role="tooltip">' +
|
---|
70 | '<div class="tooltip-arrow"></div>' +
|
---|
71 | '<div class="tooltip-inner"></div>' +
|
---|
72 | '</div>',
|
---|
73 | trigger: 'hover focus',
|
---|
74 | title: '',
|
---|
75 | delay: 0,
|
---|
76 | html: false,
|
---|
77 | selector: false,
|
---|
78 | placement: 'top',
|
---|
79 | offset: [0, 0],
|
---|
80 | container: false,
|
---|
81 | fallbackPlacements: ['top', 'right', 'bottom', 'left'],
|
---|
82 | boundary: 'clippingParents',
|
---|
83 | customClass: '',
|
---|
84 | sanitize: true,
|
---|
85 | sanitizeFn: null,
|
---|
86 | allowList: DefaultAllowlist,
|
---|
87 | popperConfig: null
|
---|
88 | }
|
---|
89 |
|
---|
90 | const Event = {
|
---|
91 | HIDE: `hide${EVENT_KEY}`,
|
---|
92 | HIDDEN: `hidden${EVENT_KEY}`,
|
---|
93 | SHOW: `show${EVENT_KEY}`,
|
---|
94 | SHOWN: `shown${EVENT_KEY}`,
|
---|
95 | INSERTED: `inserted${EVENT_KEY}`,
|
---|
96 | CLICK: `click${EVENT_KEY}`,
|
---|
97 | FOCUSIN: `focusin${EVENT_KEY}`,
|
---|
98 | FOCUSOUT: `focusout${EVENT_KEY}`,
|
---|
99 | MOUSEENTER: `mouseenter${EVENT_KEY}`,
|
---|
100 | MOUSELEAVE: `mouseleave${EVENT_KEY}`
|
---|
101 | }
|
---|
102 |
|
---|
103 | const CLASS_NAME_FADE = 'fade'
|
---|
104 | const CLASS_NAME_MODAL = 'modal'
|
---|
105 | const CLASS_NAME_SHOW = 'show'
|
---|
106 |
|
---|
107 | const HOVER_STATE_SHOW = 'show'
|
---|
108 | const HOVER_STATE_OUT = 'out'
|
---|
109 |
|
---|
110 | const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'
|
---|
111 | const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`
|
---|
112 |
|
---|
113 | const EVENT_MODAL_HIDE = 'hide.bs.modal'
|
---|
114 |
|
---|
115 | const TRIGGER_HOVER = 'hover'
|
---|
116 | const TRIGGER_FOCUS = 'focus'
|
---|
117 | const TRIGGER_CLICK = 'click'
|
---|
118 | const TRIGGER_MANUAL = 'manual'
|
---|
119 |
|
---|
120 | /**
|
---|
121 | * ------------------------------------------------------------------------
|
---|
122 | * Class Definition
|
---|
123 | * ------------------------------------------------------------------------
|
---|
124 | */
|
---|
125 |
|
---|
126 | class Tooltip extends BaseComponent {
|
---|
127 | constructor(element, config) {
|
---|
128 | if (typeof Popper === 'undefined') {
|
---|
129 | throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
|
---|
130 | }
|
---|
131 |
|
---|
132 | super(element)
|
---|
133 |
|
---|
134 | // private
|
---|
135 | this._isEnabled = true
|
---|
136 | this._timeout = 0
|
---|
137 | this._hoverState = ''
|
---|
138 | this._activeTrigger = {}
|
---|
139 | this._popper = null
|
---|
140 |
|
---|
141 | // Protected
|
---|
142 | this._config = this._getConfig(config)
|
---|
143 | this.tip = null
|
---|
144 |
|
---|
145 | this._setListeners()
|
---|
146 | }
|
---|
147 |
|
---|
148 | // Getters
|
---|
149 |
|
---|
150 | static get Default() {
|
---|
151 | return Default
|
---|
152 | }
|
---|
153 |
|
---|
154 | static get NAME() {
|
---|
155 | return NAME
|
---|
156 | }
|
---|
157 |
|
---|
158 | static get Event() {
|
---|
159 | return Event
|
---|
160 | }
|
---|
161 |
|
---|
162 | static get DefaultType() {
|
---|
163 | return DefaultType
|
---|
164 | }
|
---|
165 |
|
---|
166 | // Public
|
---|
167 |
|
---|
168 | enable() {
|
---|
169 | this._isEnabled = true
|
---|
170 | }
|
---|
171 |
|
---|
172 | disable() {
|
---|
173 | this._isEnabled = false
|
---|
174 | }
|
---|
175 |
|
---|
176 | toggleEnabled() {
|
---|
177 | this._isEnabled = !this._isEnabled
|
---|
178 | }
|
---|
179 |
|
---|
180 | toggle(event) {
|
---|
181 | if (!this._isEnabled) {
|
---|
182 | return
|
---|
183 | }
|
---|
184 |
|
---|
185 | if (event) {
|
---|
186 | const context = this._initializeOnDelegatedTarget(event)
|
---|
187 |
|
---|
188 | context._activeTrigger.click = !context._activeTrigger.click
|
---|
189 |
|
---|
190 | if (context._isWithActiveTrigger()) {
|
---|
191 | context._enter(null, context)
|
---|
192 | } else {
|
---|
193 | context._leave(null, context)
|
---|
194 | }
|
---|
195 | } else {
|
---|
196 | if (this.getTipElement().classList.contains(CLASS_NAME_SHOW)) {
|
---|
197 | this._leave(null, this)
|
---|
198 | return
|
---|
199 | }
|
---|
200 |
|
---|
201 | this._enter(null, this)
|
---|
202 | }
|
---|
203 | }
|
---|
204 |
|
---|
205 | dispose() {
|
---|
206 | clearTimeout(this._timeout)
|
---|
207 |
|
---|
208 | EventHandler.off(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)
|
---|
209 |
|
---|
210 | if (this.tip) {
|
---|
211 | this.tip.remove()
|
---|
212 | }
|
---|
213 |
|
---|
214 | this._disposePopper()
|
---|
215 | super.dispose()
|
---|
216 | }
|
---|
217 |
|
---|
218 | show() {
|
---|
219 | if (this._element.style.display === 'none') {
|
---|
220 | throw new Error('Please use show on visible elements')
|
---|
221 | }
|
---|
222 |
|
---|
223 | if (!(this.isWithContent() && this._isEnabled)) {
|
---|
224 | return
|
---|
225 | }
|
---|
226 |
|
---|
227 | const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
|
---|
228 | const shadowRoot = findShadowRoot(this._element)
|
---|
229 | const isInTheDom = shadowRoot === null ?
|
---|
230 | this._element.ownerDocument.documentElement.contains(this._element) :
|
---|
231 | shadowRoot.contains(this._element)
|
---|
232 |
|
---|
233 | if (showEvent.defaultPrevented || !isInTheDom) {
|
---|
234 | return
|
---|
235 | }
|
---|
236 |
|
---|
237 | // A trick to recreate a tooltip in case a new title is given by using the NOT documented `data-bs-original-title`
|
---|
238 | // This will be removed later in favor of a `setContent` method
|
---|
239 | if (this.constructor.NAME === 'tooltip' && this.tip && this.getTitle() !== this.tip.querySelector(SELECTOR_TOOLTIP_INNER).innerHTML) {
|
---|
240 | this._disposePopper()
|
---|
241 | this.tip.remove()
|
---|
242 | this.tip = null
|
---|
243 | }
|
---|
244 |
|
---|
245 | const tip = this.getTipElement()
|
---|
246 | const tipId = getUID(this.constructor.NAME)
|
---|
247 |
|
---|
248 | tip.setAttribute('id', tipId)
|
---|
249 | this._element.setAttribute('aria-describedby', tipId)
|
---|
250 |
|
---|
251 | if (this._config.animation) {
|
---|
252 | tip.classList.add(CLASS_NAME_FADE)
|
---|
253 | }
|
---|
254 |
|
---|
255 | const placement = typeof this._config.placement === 'function' ?
|
---|
256 | this._config.placement.call(this, tip, this._element) :
|
---|
257 | this._config.placement
|
---|
258 |
|
---|
259 | const attachment = this._getAttachment(placement)
|
---|
260 | this._addAttachmentClass(attachment)
|
---|
261 |
|
---|
262 | const { container } = this._config
|
---|
263 | Data.set(tip, this.constructor.DATA_KEY, this)
|
---|
264 |
|
---|
265 | if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
|
---|
266 | container.append(tip)
|
---|
267 | EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
|
---|
268 | }
|
---|
269 |
|
---|
270 | if (this._popper) {
|
---|
271 | this._popper.update()
|
---|
272 | } else {
|
---|
273 | this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
|
---|
274 | }
|
---|
275 |
|
---|
276 | tip.classList.add(CLASS_NAME_SHOW)
|
---|
277 |
|
---|
278 | const customClass = this._resolvePossibleFunction(this._config.customClass)
|
---|
279 | if (customClass) {
|
---|
280 | tip.classList.add(...customClass.split(' '))
|
---|
281 | }
|
---|
282 |
|
---|
283 | // If this is a touch-enabled device we add extra
|
---|
284 | // empty mouseover listeners to the body's immediate children;
|
---|
285 | // only needed because of broken event delegation on iOS
|
---|
286 | // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
---|
287 | if ('ontouchstart' in document.documentElement) {
|
---|
288 | [].concat(...document.body.children).forEach(element => {
|
---|
289 | EventHandler.on(element, 'mouseover', noop)
|
---|
290 | })
|
---|
291 | }
|
---|
292 |
|
---|
293 | const complete = () => {
|
---|
294 | const prevHoverState = this._hoverState
|
---|
295 |
|
---|
296 | this._hoverState = null
|
---|
297 | EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
|
---|
298 |
|
---|
299 | if (prevHoverState === HOVER_STATE_OUT) {
|
---|
300 | this._leave(null, this)
|
---|
301 | }
|
---|
302 | }
|
---|
303 |
|
---|
304 | const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE)
|
---|
305 | this._queueCallback(complete, this.tip, isAnimated)
|
---|
306 | }
|
---|
307 |
|
---|
308 | hide() {
|
---|
309 | if (!this._popper) {
|
---|
310 | return
|
---|
311 | }
|
---|
312 |
|
---|
313 | const tip = this.getTipElement()
|
---|
314 | const complete = () => {
|
---|
315 | if (this._isWithActiveTrigger()) {
|
---|
316 | return
|
---|
317 | }
|
---|
318 |
|
---|
319 | if (this._hoverState !== HOVER_STATE_SHOW) {
|
---|
320 | tip.remove()
|
---|
321 | }
|
---|
322 |
|
---|
323 | this._cleanTipClass()
|
---|
324 | this._element.removeAttribute('aria-describedby')
|
---|
325 | EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
|
---|
326 |
|
---|
327 | this._disposePopper()
|
---|
328 | }
|
---|
329 |
|
---|
330 | const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
|
---|
331 | if (hideEvent.defaultPrevented) {
|
---|
332 | return
|
---|
333 | }
|
---|
334 |
|
---|
335 | tip.classList.remove(CLASS_NAME_SHOW)
|
---|
336 |
|
---|
337 | // If this is a touch-enabled device we remove the extra
|
---|
338 | // empty mouseover listeners we added for iOS support
|
---|
339 | if ('ontouchstart' in document.documentElement) {
|
---|
340 | [].concat(...document.body.children)
|
---|
341 | .forEach(element => EventHandler.off(element, 'mouseover', noop))
|
---|
342 | }
|
---|
343 |
|
---|
344 | this._activeTrigger[TRIGGER_CLICK] = false
|
---|
345 | this._activeTrigger[TRIGGER_FOCUS] = false
|
---|
346 | this._activeTrigger[TRIGGER_HOVER] = false
|
---|
347 |
|
---|
348 | const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE)
|
---|
349 | this._queueCallback(complete, this.tip, isAnimated)
|
---|
350 | this._hoverState = ''
|
---|
351 | }
|
---|
352 |
|
---|
353 | update() {
|
---|
354 | if (this._popper !== null) {
|
---|
355 | this._popper.update()
|
---|
356 | }
|
---|
357 | }
|
---|
358 |
|
---|
359 | // Protected
|
---|
360 |
|
---|
361 | isWithContent() {
|
---|
362 | return Boolean(this.getTitle())
|
---|
363 | }
|
---|
364 |
|
---|
365 | getTipElement() {
|
---|
366 | if (this.tip) {
|
---|
367 | return this.tip
|
---|
368 | }
|
---|
369 |
|
---|
370 | const element = document.createElement('div')
|
---|
371 | element.innerHTML = this._config.template
|
---|
372 |
|
---|
373 | const tip = element.children[0]
|
---|
374 | this.setContent(tip)
|
---|
375 | tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
|
---|
376 |
|
---|
377 | this.tip = tip
|
---|
378 | return this.tip
|
---|
379 | }
|
---|
380 |
|
---|
381 | setContent(tip) {
|
---|
382 | this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TOOLTIP_INNER)
|
---|
383 | }
|
---|
384 |
|
---|
385 | _sanitizeAndSetContent(template, content, selector) {
|
---|
386 | const templateElement = SelectorEngine.findOne(selector, template)
|
---|
387 |
|
---|
388 | if (!content && templateElement) {
|
---|
389 | templateElement.remove()
|
---|
390 | return
|
---|
391 | }
|
---|
392 |
|
---|
393 | // we use append for html objects to maintain js events
|
---|
394 | this.setElementContent(templateElement, content)
|
---|
395 | }
|
---|
396 |
|
---|
397 | setElementContent(element, content) {
|
---|
398 | if (element === null) {
|
---|
399 | return
|
---|
400 | }
|
---|
401 |
|
---|
402 | if (isElement(content)) {
|
---|
403 | content = getElement(content)
|
---|
404 |
|
---|
405 | // content is a DOM node or a jQuery
|
---|
406 | if (this._config.html) {
|
---|
407 | if (content.parentNode !== element) {
|
---|
408 | element.innerHTML = ''
|
---|
409 | element.append(content)
|
---|
410 | }
|
---|
411 | } else {
|
---|
412 | element.textContent = content.textContent
|
---|
413 | }
|
---|
414 |
|
---|
415 | return
|
---|
416 | }
|
---|
417 |
|
---|
418 | if (this._config.html) {
|
---|
419 | if (this._config.sanitize) {
|
---|
420 | content = sanitizeHtml(content, this._config.allowList, this._config.sanitizeFn)
|
---|
421 | }
|
---|
422 |
|
---|
423 | element.innerHTML = content
|
---|
424 | } else {
|
---|
425 | element.textContent = content
|
---|
426 | }
|
---|
427 | }
|
---|
428 |
|
---|
429 | getTitle() {
|
---|
430 | const title = this._element.getAttribute('data-bs-original-title') || this._config.title
|
---|
431 |
|
---|
432 | return this._resolvePossibleFunction(title)
|
---|
433 | }
|
---|
434 |
|
---|
435 | updateAttachment(attachment) {
|
---|
436 | if (attachment === 'right') {
|
---|
437 | return 'end'
|
---|
438 | }
|
---|
439 |
|
---|
440 | if (attachment === 'left') {
|
---|
441 | return 'start'
|
---|
442 | }
|
---|
443 |
|
---|
444 | return attachment
|
---|
445 | }
|
---|
446 |
|
---|
447 | // Private
|
---|
448 |
|
---|
449 | _initializeOnDelegatedTarget(event, context) {
|
---|
450 | return context || this.constructor.getOrCreateInstance(event.delegateTarget, this._getDelegateConfig())
|
---|
451 | }
|
---|
452 |
|
---|
453 | _getOffset() {
|
---|
454 | const { offset } = this._config
|
---|
455 |
|
---|
456 | if (typeof offset === 'string') {
|
---|
457 | return offset.split(',').map(val => Number.parseInt(val, 10))
|
---|
458 | }
|
---|
459 |
|
---|
460 | if (typeof offset === 'function') {
|
---|
461 | return popperData => offset(popperData, this._element)
|
---|
462 | }
|
---|
463 |
|
---|
464 | return offset
|
---|
465 | }
|
---|
466 |
|
---|
467 | _resolvePossibleFunction(content) {
|
---|
468 | return typeof content === 'function' ? content.call(this._element) : content
|
---|
469 | }
|
---|
470 |
|
---|
471 | _getPopperConfig(attachment) {
|
---|
472 | const defaultBsPopperConfig = {
|
---|
473 | placement: attachment,
|
---|
474 | modifiers: [
|
---|
475 | {
|
---|
476 | name: 'flip',
|
---|
477 | options: {
|
---|
478 | fallbackPlacements: this._config.fallbackPlacements
|
---|
479 | }
|
---|
480 | },
|
---|
481 | {
|
---|
482 | name: 'offset',
|
---|
483 | options: {
|
---|
484 | offset: this._getOffset()
|
---|
485 | }
|
---|
486 | },
|
---|
487 | {
|
---|
488 | name: 'preventOverflow',
|
---|
489 | options: {
|
---|
490 | boundary: this._config.boundary
|
---|
491 | }
|
---|
492 | },
|
---|
493 | {
|
---|
494 | name: 'arrow',
|
---|
495 | options: {
|
---|
496 | element: `.${this.constructor.NAME}-arrow`
|
---|
497 | }
|
---|
498 | },
|
---|
499 | {
|
---|
500 | name: 'onChange',
|
---|
501 | enabled: true,
|
---|
502 | phase: 'afterWrite',
|
---|
503 | fn: data => this._handlePopperPlacementChange(data)
|
---|
504 | }
|
---|
505 | ],
|
---|
506 | onFirstUpdate: data => {
|
---|
507 | if (data.options.placement !== data.placement) {
|
---|
508 | this._handlePopperPlacementChange(data)
|
---|
509 | }
|
---|
510 | }
|
---|
511 | }
|
---|
512 |
|
---|
513 | return {
|
---|
514 | ...defaultBsPopperConfig,
|
---|
515 | ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
|
---|
516 | }
|
---|
517 | }
|
---|
518 |
|
---|
519 | _addAttachmentClass(attachment) {
|
---|
520 | this.getTipElement().classList.add(`${this._getBasicClassPrefix()}-${this.updateAttachment(attachment)}`)
|
---|
521 | }
|
---|
522 |
|
---|
523 | _getAttachment(placement) {
|
---|
524 | return AttachmentMap[placement.toUpperCase()]
|
---|
525 | }
|
---|
526 |
|
---|
527 | _setListeners() {
|
---|
528 | const triggers = this._config.trigger.split(' ')
|
---|
529 |
|
---|
530 | triggers.forEach(trigger => {
|
---|
531 | if (trigger === 'click') {
|
---|
532 | EventHandler.on(this._element, this.constructor.Event.CLICK, this._config.selector, event => this.toggle(event))
|
---|
533 | } else if (trigger !== TRIGGER_MANUAL) {
|
---|
534 | const eventIn = trigger === TRIGGER_HOVER ?
|
---|
535 | this.constructor.Event.MOUSEENTER :
|
---|
536 | this.constructor.Event.FOCUSIN
|
---|
537 | const eventOut = trigger === TRIGGER_HOVER ?
|
---|
538 | this.constructor.Event.MOUSELEAVE :
|
---|
539 | this.constructor.Event.FOCUSOUT
|
---|
540 |
|
---|
541 | EventHandler.on(this._element, eventIn, this._config.selector, event => this._enter(event))
|
---|
542 | EventHandler.on(this._element, eventOut, this._config.selector, event => this._leave(event))
|
---|
543 | }
|
---|
544 | })
|
---|
545 |
|
---|
546 | this._hideModalHandler = () => {
|
---|
547 | if (this._element) {
|
---|
548 | this.hide()
|
---|
549 | }
|
---|
550 | }
|
---|
551 |
|
---|
552 | EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler)
|
---|
553 |
|
---|
554 | if (this._config.selector) {
|
---|
555 | this._config = {
|
---|
556 | ...this._config,
|
---|
557 | trigger: 'manual',
|
---|
558 | selector: ''
|
---|
559 | }
|
---|
560 | } else {
|
---|
561 | this._fixTitle()
|
---|
562 | }
|
---|
563 | }
|
---|
564 |
|
---|
565 | _fixTitle() {
|
---|
566 | const title = this._element.getAttribute('title')
|
---|
567 | const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
|
---|
568 |
|
---|
569 | if (title || originalTitleType !== 'string') {
|
---|
570 | this._element.setAttribute('data-bs-original-title', title || '')
|
---|
571 | if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
|
---|
572 | this._element.setAttribute('aria-label', title)
|
---|
573 | }
|
---|
574 |
|
---|
575 | this._element.setAttribute('title', '')
|
---|
576 | }
|
---|
577 | }
|
---|
578 |
|
---|
579 | _enter(event, context) {
|
---|
580 | context = this._initializeOnDelegatedTarget(event, context)
|
---|
581 |
|
---|
582 | if (event) {
|
---|
583 | context._activeTrigger[
|
---|
584 | event.type === 'focusin' ? TRIGGER_FOCUS : TRIGGER_HOVER
|
---|
585 | ] = true
|
---|
586 | }
|
---|
587 |
|
---|
588 | if (context.getTipElement().classList.contains(CLASS_NAME_SHOW) || context._hoverState === HOVER_STATE_SHOW) {
|
---|
589 | context._hoverState = HOVER_STATE_SHOW
|
---|
590 | return
|
---|
591 | }
|
---|
592 |
|
---|
593 | clearTimeout(context._timeout)
|
---|
594 |
|
---|
595 | context._hoverState = HOVER_STATE_SHOW
|
---|
596 |
|
---|
597 | if (!context._config.delay || !context._config.delay.show) {
|
---|
598 | context.show()
|
---|
599 | return
|
---|
600 | }
|
---|
601 |
|
---|
602 | context._timeout = setTimeout(() => {
|
---|
603 | if (context._hoverState === HOVER_STATE_SHOW) {
|
---|
604 | context.show()
|
---|
605 | }
|
---|
606 | }, context._config.delay.show)
|
---|
607 | }
|
---|
608 |
|
---|
609 | _leave(event, context) {
|
---|
610 | context = this._initializeOnDelegatedTarget(event, context)
|
---|
611 |
|
---|
612 | if (event) {
|
---|
613 | context._activeTrigger[
|
---|
614 | event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER
|
---|
615 | ] = context._element.contains(event.relatedTarget)
|
---|
616 | }
|
---|
617 |
|
---|
618 | if (context._isWithActiveTrigger()) {
|
---|
619 | return
|
---|
620 | }
|
---|
621 |
|
---|
622 | clearTimeout(context._timeout)
|
---|
623 |
|
---|
624 | context._hoverState = HOVER_STATE_OUT
|
---|
625 |
|
---|
626 | if (!context._config.delay || !context._config.delay.hide) {
|
---|
627 | context.hide()
|
---|
628 | return
|
---|
629 | }
|
---|
630 |
|
---|
631 | context._timeout = setTimeout(() => {
|
---|
632 | if (context._hoverState === HOVER_STATE_OUT) {
|
---|
633 | context.hide()
|
---|
634 | }
|
---|
635 | }, context._config.delay.hide)
|
---|
636 | }
|
---|
637 |
|
---|
638 | _isWithActiveTrigger() {
|
---|
639 | for (const trigger in this._activeTrigger) {
|
---|
640 | if (this._activeTrigger[trigger]) {
|
---|
641 | return true
|
---|
642 | }
|
---|
643 | }
|
---|
644 |
|
---|
645 | return false
|
---|
646 | }
|
---|
647 |
|
---|
648 | _getConfig(config) {
|
---|
649 | const dataAttributes = Manipulator.getDataAttributes(this._element)
|
---|
650 |
|
---|
651 | Object.keys(dataAttributes).forEach(dataAttr => {
|
---|
652 | if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
|
---|
653 | delete dataAttributes[dataAttr]
|
---|
654 | }
|
---|
655 | })
|
---|
656 |
|
---|
657 | config = {
|
---|
658 | ...this.constructor.Default,
|
---|
659 | ...dataAttributes,
|
---|
660 | ...(typeof config === 'object' && config ? config : {})
|
---|
661 | }
|
---|
662 |
|
---|
663 | config.container = config.container === false ? document.body : getElement(config.container)
|
---|
664 |
|
---|
665 | if (typeof config.delay === 'number') {
|
---|
666 | config.delay = {
|
---|
667 | show: config.delay,
|
---|
668 | hide: config.delay
|
---|
669 | }
|
---|
670 | }
|
---|
671 |
|
---|
672 | if (typeof config.title === 'number') {
|
---|
673 | config.title = config.title.toString()
|
---|
674 | }
|
---|
675 |
|
---|
676 | if (typeof config.content === 'number') {
|
---|
677 | config.content = config.content.toString()
|
---|
678 | }
|
---|
679 |
|
---|
680 | typeCheckConfig(NAME, config, this.constructor.DefaultType)
|
---|
681 |
|
---|
682 | if (config.sanitize) {
|
---|
683 | config.template = sanitizeHtml(config.template, config.allowList, config.sanitizeFn)
|
---|
684 | }
|
---|
685 |
|
---|
686 | return config
|
---|
687 | }
|
---|
688 |
|
---|
689 | _getDelegateConfig() {
|
---|
690 | const config = {}
|
---|
691 |
|
---|
692 | for (const key in this._config) {
|
---|
693 | if (this.constructor.Default[key] !== this._config[key]) {
|
---|
694 | config[key] = this._config[key]
|
---|
695 | }
|
---|
696 | }
|
---|
697 |
|
---|
698 | // In the future can be replaced with:
|
---|
699 | // const keysWithDifferentValues = Object.entries(this._config).filter(entry => this.constructor.Default[entry[0]] !== this._config[entry[0]])
|
---|
700 | // `Object.fromEntries(keysWithDifferentValues)`
|
---|
701 | return config
|
---|
702 | }
|
---|
703 |
|
---|
704 | _cleanTipClass() {
|
---|
705 | const tip = this.getTipElement()
|
---|
706 | const basicClassPrefixRegex = new RegExp(`(^|\\s)${this._getBasicClassPrefix()}\\S+`, 'g')
|
---|
707 | const tabClass = tip.getAttribute('class').match(basicClassPrefixRegex)
|
---|
708 | if (tabClass !== null && tabClass.length > 0) {
|
---|
709 | tabClass.map(token => token.trim())
|
---|
710 | .forEach(tClass => tip.classList.remove(tClass))
|
---|
711 | }
|
---|
712 | }
|
---|
713 |
|
---|
714 | _getBasicClassPrefix() {
|
---|
715 | return CLASS_PREFIX
|
---|
716 | }
|
---|
717 |
|
---|
718 | _handlePopperPlacementChange(popperData) {
|
---|
719 | const { state } = popperData
|
---|
720 |
|
---|
721 | if (!state) {
|
---|
722 | return
|
---|
723 | }
|
---|
724 |
|
---|
725 | this.tip = state.elements.popper
|
---|
726 | this._cleanTipClass()
|
---|
727 | this._addAttachmentClass(this._getAttachment(state.placement))
|
---|
728 | }
|
---|
729 |
|
---|
730 | _disposePopper() {
|
---|
731 | if (this._popper) {
|
---|
732 | this._popper.destroy()
|
---|
733 | this._popper = null
|
---|
734 | }
|
---|
735 | }
|
---|
736 |
|
---|
737 | // Static
|
---|
738 |
|
---|
739 | static jQueryInterface(config) {
|
---|
740 | return this.each(function () {
|
---|
741 | const data = Tooltip.getOrCreateInstance(this, config)
|
---|
742 |
|
---|
743 | if (typeof config === 'string') {
|
---|
744 | if (typeof data[config] === 'undefined') {
|
---|
745 | throw new TypeError(`No method named "${config}"`)
|
---|
746 | }
|
---|
747 |
|
---|
748 | data[config]()
|
---|
749 | }
|
---|
750 | })
|
---|
751 | }
|
---|
752 | }
|
---|
753 |
|
---|
754 | /**
|
---|
755 | * ------------------------------------------------------------------------
|
---|
756 | * jQuery
|
---|
757 | * ------------------------------------------------------------------------
|
---|
758 | * add .Tooltip to jQuery only if jQuery is present
|
---|
759 | */
|
---|
760 |
|
---|
761 | defineJQueryPlugin(Tooltip)
|
---|
762 |
|
---|
763 | export default Tooltip
|
---|