diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 2c5f03a29340..29ca4775d7b6 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -121,6 +121,10 @@ class Tooltip extends BaseComponent { this.tip = null this._setListeners() + + if (!this._config.selector) { + this._fixTitle() + } } // Getters @@ -149,25 +153,12 @@ class Tooltip extends BaseComponent { this._isEnabled = !this._isEnabled } - toggle(event) { + toggle() { if (!this._isEnabled) { return } - if (event) { - const context = this._initializeOnDelegatedTarget(event) - - context._activeTrigger.click = !context._activeTrigger.click - - if (context._isWithActiveTrigger()) { - context._enter() - } else { - context._leave() - } - - return - } - + this._activeTrigger.click = !this._activeTrigger.click if (this._isShown()) { this._leave() return @@ -185,8 +176,8 @@ class Tooltip extends BaseComponent { this.tip.remove() } - if (this._config.originalTitle) { - this._element.setAttribute('title', this._config.originalTitle) + if (this._element.getAttribute('data-bs-original-title')) { + this._element.setAttribute('title', this._element.getAttribute('data-bs-original-title')) } this._disposePopper() @@ -376,7 +367,7 @@ class Tooltip extends BaseComponent { } _getTitle() { - return this._resolvePossibleFunction(this._config.title) || this._config.originalTitle + return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('data-bs-original-title') } // Private @@ -470,7 +461,10 @@ class Tooltip extends BaseComponent { for (const trigger of triggers) { if (trigger === 'click') { - EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => this.toggle(event)) + EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => { + const context = this._initializeOnDelegatedTarget(event) + context.toggle() + }) } else if (trigger !== TRIGGER_MANUAL) { const eventIn = trigger === TRIGGER_HOVER ? this.constructor.eventName(EVENT_MOUSEENTER) : @@ -501,20 +495,10 @@ class Tooltip extends BaseComponent { } EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler) - - if (this._config.selector) { - this._config = { - ...this._config, - trigger: 'manual', - selector: '' - } - } else { - this._fixTitle() - } } _fixTitle() { - const title = this._config.originalTitle + const title = this._element.getAttribute('title') if (!title) { return @@ -524,6 +508,7 @@ class Tooltip extends BaseComponent { this._element.setAttribute('aria-label', title) } + this._element.setAttribute('data-bs-original-title', title) // DO NOT USE IT. Is only for backwards compatibility this._element.removeAttribute('title') } @@ -594,7 +579,6 @@ class Tooltip extends BaseComponent { } } - config.originalTitle = this._element.getAttribute('title') || '' if (typeof config.title === 'number') { config.title = config.title.toString() } @@ -615,6 +599,9 @@ class Tooltip extends BaseComponent { } } + config.selector = false + config.trigger = 'manual' + // In the future can be replaced with: // const keysWithDifferentValues = Object.entries(this._config).filter(entry => this.constructor.Default[entry[0]] !== this._config[entry[0]]) // `Object.fromEntries(keysWithDifferentValues)` diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 779ac1aaf57c..9a65640b44ff 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -66,42 +66,68 @@

Tooltip Bootstrap Visual Test

+ +
+
+
Test Selector triggered tooltips
+
+
+ + +
+ +
+
+ +
+
+ + +