diff --git a/client/scss/overrides/_vendor.tippy.scss b/client/scss/overrides/_vendor.tippy.scss
index e9ea1e190f..e9ae4fad6b 100644
--- a/client/scss/overrides/_vendor.tippy.scss
+++ b/client/scss/overrides/_vendor.tippy.scss
@@ -31,6 +31,14 @@
   }
 }
 
+.tippy-box[data-theme='popup'] {
+  @apply w-rounded w-bg-surface-page w-text-inherit w-shadow-md;
+
+  &[data-placement^='bottom'] > .tippy-arrow::before {
+    @apply w-border-b-surface-page;
+  }
+}
+
 .tippy-box[data-theme='drilldown'] {
   @apply w-rounded w-bg-surface-page w-text-inherit w-shadow-md;
   width: 300px;
diff --git a/client/src/controllers/DropdownController.ts b/client/src/controllers/DropdownController.ts
index b80229dda1..d52efe6698 100644
--- a/client/src/controllers/DropdownController.ts
+++ b/client/src/controllers/DropdownController.ts
@@ -187,8 +187,8 @@ export class DropdownController extends Controller<HTMLElement> {
       ...(this.hasContentTarget
         ? { content: this.contentTarget as Content }
         : {}),
-      ...this.themeOptions,
       trigger: 'click',
+      ...this.themeOptions,
       interactive: true,
       ...(this.hasOffsetValue && { offset: this.offsetValue }),
       getReferenceClientRect: () => this.reference.getBoundingClientRect(),
@@ -210,6 +210,12 @@ export class DropdownController extends Controller<HTMLElement> {
           placement: 'bottom',
           plugins: this.plugins,
         },
+        'popup': {
+          arrow: true,
+          placement: 'bottom',
+          plugins: this.plugins,
+          trigger: 'mouseenter focus click',
+        },
         'drilldown': {
           arrow: false,
           maxWidth: 'none',