diff --git a/js/src/popover.js b/js/src/popover.js index b399851248..6ab31d6e49 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -30,7 +30,7 @@ const Default = { content: '', template: '' } @@ -90,6 +90,24 @@ class Popover extends Tooltip { return this.getTitle() || this._getContent() } + getTipElement() { + if (this.tip) { + return this.tip + } + + this.tip = super.getTipElement() + + if (!this.getTitle()) { + this.tip.removeChild(SelectorEngine.findOne(SELECTOR_TITLE, this.tip)) + } + + if (!this._getContent()) { + this.tip.removeChild(SelectorEngine.findOne(SELECTOR_CONTENT, this.tip)) + } + + return this.tip + } + setContent() { const tip = this.getTipElement() diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js index dc1c4afc13..7c741fe470 100644 --- a/js/tests/unit/popover.spec.js +++ b/js/tests/unit/popover.spec.js @@ -117,6 +117,46 @@ describe('Popover', () => { popover.show() }) + it('should show a popover with just content without having header', done => { + fixtureEl.innerHTML = 'Nice link' + + const popoverEl = fixtureEl.querySelector('a') + const popover = new Popover(popoverEl, { + content: 'Some beautiful content :)' + }) + + popoverEl.addEventListener('shown.bs.popover', () => { + const popoverDisplayed = document.querySelector('.popover') + + expect(popoverDisplayed).not.toBeNull() + expect(popoverDisplayed.querySelector('.popover-header')).toBeNull() + expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)') + done() + }) + + popover.show() + }) + + it('should show a popover with just title without having body', done => { + fixtureEl.innerHTML = 'Nice link' + + const popoverEl = fixtureEl.querySelector('a') + const popover = new Popover(popoverEl, { + title: 'Title, which does not require content' + }) + + popoverEl.addEventListener('shown.bs.popover', () => { + const popoverDisplayed = document.querySelector('.popover') + + expect(popoverDisplayed).not.toBeNull() + expect(popoverDisplayed.querySelector('.popover-body')).toBeNull() + expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title, which does not require content') + done() + }) + + popover.show() + }) + it('should show a popover with provided custom class', done => { fixtureEl.innerHTML = 'BS twitter'