[6a3a178] | 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
|
---|