1 files changed, 35 insertions, 43 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/create_menu.vue b/app/assets/javascripts/super_sidebar/components/create_menu.vue
index 3645606515f..d1e96479631 100644
--- a/app/assets/javascripts/super_sidebar/components/create_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/create_menu.vue
@@ -1,7 +1,7 @@
 <script>
 import {
   GlDisclosureDropdown,
-  GlTooltip,
+  GlTooltipDirective,
   GlDisclosureDropdownGroup,
   GlDisclosureDropdownItem,
 } from '@gitlab/ui';
@@ -14,7 +14,7 @@ import {
 import { DROPDOWN_Y_OFFSET, IMPERSONATING_OFFSET } from '../constants';
 
 // Left offset required for the dropdown to be aligned with the super sidebar
-const DROPDOWN_X_OFFSET_BASE = -147;
+const DROPDOWN_X_OFFSET_BASE = -179;
 const DROPDOWN_X_OFFSET_IMPERSONATING = DROPDOWN_X_OFFSET_BASE + IMPERSONATING_OFFSET;
 
 export default {
@@ -22,9 +22,11 @@ export default {
     GlDisclosureDropdown,
     GlDisclosureDropdownGroup,
     GlDisclosureDropdownItem,
-    GlTooltip,
     InviteMembersTrigger,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   i18n: {
     createNew: __('Create new...'),
   },
@@ -59,45 +61,35 @@ export default {
 </script>
 
 <template>
-  <div>
-    <gl-disclosure-dropdown
-      category="tertiary"
-      icon="plus"
-      no-caret
-      text-sr-only
-      :toggle-text="$options.i18n.createNew"
-      :toggle-id="$options.toggleId"
-      :dropdown-offset="dropdownOffset"
-      data-qa-selector="new_menu_toggle"
-      data-testid="new-menu-toggle"
-      @shown="dropdownOpen = true"
-      @hidden="dropdownOpen = false"
-    >
-      <gl-disclosure-dropdown-group
-        v-for="(group, index) in groups"
-        :key="group.name"
-        :bordered="index !== 0"
-        :group="group"
-      >
-        <template v-for="groupItem in group.items">
-          <invite-members-trigger
-            v-if="isInvitedMembers(groupItem)"
-            :key="`${groupItem.text}-trigger`"
-            trigger-source="top-nav"
-            :trigger-element="$options.TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN"
-          />
-          <gl-disclosure-dropdown-item v-else :key="groupItem.text" :item="groupItem" />
-        </template>
-      </gl-disclosure-dropdown-group>
-    </gl-disclosure-dropdown>
-    <gl-tooltip
-      v-if="!dropdownOpen"
-      :target="`#${$options.toggleId}`"
-      placement="bottom"
-      container="#super-sidebar"
-      noninteractive
+  <gl-disclosure-dropdown
+    v-gl-tooltip:super-sidebar.hover.bottom="dropdownOpen ? '' : $options.i18n.createNew"
+    category="tertiary"
+    icon="plus"
+    no-caret
+    text-sr-only
+    :toggle-text="$options.i18n.createNew"
+    :toggle-id="$options.toggleId"
+    :dropdown-offset="dropdownOffset"
+    data-qa-selector="new_menu_toggle"
+    data-testid="new-menu-toggle"
+    @shown="dropdownOpen = true"
+    @hidden="dropdownOpen = false"
+  >
+    <gl-disclosure-dropdown-group
+      v-for="(group, index) in groups"
+      :key="group.name"
+      :bordered="index !== 0"
+      :group="group"
     >
-      {{ $options.i18n.createNew }}
-    </gl-tooltip>
-  </div>
+      <template v-for="groupItem in group.items">
+        <invite-members-trigger
+          v-if="isInvitedMembers(groupItem)"
+          :key="`${groupItem.text}-trigger`"
+          trigger-source="top_nav"
+          :trigger-element="$options.TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN"
+        />
+        <gl-disclosure-dropdown-item v-else :key="groupItem.text" :item="groupItem" />
+      </template>
+    </gl-disclosure-dropdown-group>
+  </gl-disclosure-dropdown>
 </template>