diff --git a/js/src/popover.js b/js/src/popover.js
index 15deaafe23..dbd67558f8 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -84,9 +84,7 @@ class Popover extends Tooltip {
return this.getTitle() || this._getContent()
}
- setContent() {
- const tip = this.getTipElement()
-
+ setContent(tip) {
this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TITLE)
this._sanitizeAndSetContent(tip, this._getContent(), SELECTOR_CONTENT)
}
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index f932a9ff99..2632e46e00 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -243,8 +243,6 @@ class Tooltip extends BaseComponent {
tip.setAttribute('id', tipId)
this._element.setAttribute('aria-describedby', tipId)
- this.setContent()
-
if (this._config.animation) {
tip.classList.add(CLASS_NAME_FADE)
}
@@ -371,20 +369,21 @@ class Tooltip extends BaseComponent {
element.innerHTML = this._config.template
const tip = element.children[0]
+ this.setContent(tip)
tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
this.tip = tip
return this.tip
}
- setContent() {
- const tip = this.getTipElement()
+ setContent(tip) {
this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TOOLTIP_INNER)
}
_sanitizeAndSetContent(template, content, selector) {
const templateElement = SelectorEngine.findOne(selector, template)
- if (!content) {
+
+ if (!content && templateElement) {
templateElement.remove()
return
}
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index 5460528b4c..c54fc49eee 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -1,7 +1,7 @@
import Popover from '../../src/popover'
/** Test helpers */
-import { getFixture, clearFixture, jQueryMock } from '../helpers/fixture'
+import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
describe('Popover', () => {
let fixtureEl
@@ -157,6 +157,37 @@ describe('Popover', () => {
popover.show()
})
+ it('should call setContent once', done => {
+ fixtureEl.innerHTML = 'BS twitter'
+
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl, {
+ content: 'Popover content'
+ })
+
+ const spy = spyOn(popover, 'setContent').and.callThrough()
+ let times = 1
+
+ popoverEl.addEventListener('hidden.bs.popover', () => {
+ popover.show()
+ })
+
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ const popoverDisplayed = document.querySelector('.popover')
+
+ expect(popoverDisplayed).not.toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
+ expect(spy).toHaveBeenCalledTimes(1)
+ if (times > 1) {
+ done()
+ }
+
+ times++
+ popover.hide()
+ })
+ popover.show()
+ })
+
it('should show a popover with provided custom class', done => {
fixtureEl.innerHTML = 'BS twitter'
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index f3f90c3a3f..22a7edd017 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -1045,10 +1045,10 @@ describe('Tooltip', () => {
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl)
- tooltip.setContent()
-
const tip = tooltip.getTipElement()
+ tooltip.setContent(tip)
+
expect(tip.classList.contains('show')).toEqual(false)
expect(tip.classList.contains('fade')).toEqual(false)
expect(tip.querySelector('.tooltip-inner').textContent).toEqual('Another tooltip')