Add popup theme for tippy and DropdownController

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;

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',