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 <[email protected]>

1 files changed, 19 insertions, 1 deletions

diff --git a/js/src/popover.js b/js/src/popover.js
index b39985124..6ab31d6e4 100644
--- 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()