Don't add empty content holder when there is no content available (#33982)

* Remove content holder when there is no content

* Add tests to check the removal of header/content

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/popover.js b/js/src/popover.js
index b39985124810a9d880a95cda3f6730c161d6bebb..6ab31d6e49aafce5726e16d23cf93c8c185a096e 100644 (file)
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -30,7 +30,7 @@ const Default = {
   content: '',
   template: '<div class="popover" role="tooltip">' +
               '<div class="popover-arrow"></div>' +
-                '<h3 class="popover-header"></h3>' +
+              '<h3 class="popover-header"></h3>' +
               '<div class="popover-body"></div>' +
             '</div>'
 }
@@ -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 dc1c4afc13f46ef171ac09ce50d3658806769e95..7c741fe470085faf834464ee2671bdc8234069d3 100644 (file)
--- 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 = '<a href="#">Nice link</a>'
+
+      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 = '<a href="#">Nice link</a>'
+
+      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 = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'