diff --git a/app/assets/javascripts/discourse/app/components/d-popover.js b/app/assets/javascripts/discourse/app/components/d-popover.js
index 697d922fdfe..a5c935fc400 100644
--- a/app/assets/javascripts/discourse/app/components/d-popover.js
+++ b/app/assets/javascripts/discourse/app/components/d-popover.js
@@ -10,6 +10,8 @@ export default class DiscoursePopover extends Component {
 
   options = null;
 
+  class = null;
+
   didInsertElement() {
     this._super(...arguments);
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-popover.hbs b/app/assets/javascripts/discourse/app/templates/components/d-popover.hbs
index 011a176bdaa..f17c8d5f9dc 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-popover.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-popover.hbs
@@ -1,3 +1,3 @@
-<div id={{componentId}} class="d-popover {{if isExpanded "is-expanded"}}">
+<div id={{componentId}} class="d-popover {{class}} {{if isExpanded "is-expanded"}}">
   {{yield (hash isExpanded=isExpanded)}}
 </div>
diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js b/app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js
index bc6ce8ff2b5..85ebf875ab5 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js
@@ -73,4 +73,12 @@ discourseModule("Integration | Component | d-popover", function (hooks) {
       assert.ok(exists(".d-icon-chevron-up"));
     },
   });
+
+  componentTest("d-popover component accepts a class property", {
+    template: hbs`{{#d-popover class="foo"}}{{/d-popover}}`,
+
+    async test(assert) {
+      assert.ok(exists(".d-popover.foo"));
+    },
+  });
 });