diff --git a/packages/app/cypress/e2e/sidebar_navigation.cy.ts b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
index 86431d2c3582..ea15c74c8ca9 100644
--- a/packages/app/cypress/e2e/sidebar_navigation.cy.ts
+++ b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
@@ -114,20 +114,20 @@ describe('Sidebar Navigation', () => {
       cy.findByLabelText('Sidebar').closest('[aria-expanded]').should('have.attr', 'aria-expanded', 'false')
 
       cy.get('[data-cy="sidebar-header"').trigger('mouseenter')
-      cy.contains('#tooltip-target > div', 'todos')
+      cy.contains('.v-popper--some-open--tooltip', 'todos')
       cy.percySnapshot()
       cy.get('[data-cy="sidebar-header"]').trigger('mouseout')
 
       cy.get('[data-e2e-href="/runs"]').trigger('mouseenter')
-      cy.contains('#tooltip-target > div', 'Runs')
+      cy.contains('.v-popper--some-open--tooltip', 'Runs')
       cy.get('[data-e2e-href="/runs"]').trigger('mouseout')
 
       cy.get('[data-e2e-href="/specs"]').trigger('mouseenter')
-      cy.contains('#tooltip-target > div', 'Specs')
+      cy.contains('.v-popper--some-open--tooltip', 'Specs')
       cy.get('[data-e2e-href="/specs"]').trigger('mouseout')
 
       cy.get('[data-e2e-href="/settings"]').trigger('mouseenter')
-      cy.contains('#tooltip-target > div', 'Settings')
+      cy.contains('.v-popper--some-open--tooltip', 'Settings')
       cy.get('[data-e2e-href="/settings"]').trigger('mouseout')
     })
 
diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index cf83d10a902c..f25b7ad725a9 100644
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -33,7 +33,6 @@
       </router-view>
     </main>
   </div>
-  <div id="tooltip-target" />
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/app/src/navigation/SidebarNavigation.cy.tsx b/packages/app/src/navigation/SidebarNavigation.cy.tsx
index 31663fdc6eea..b2074165ce25 100644
--- a/packages/app/src/navigation/SidebarNavigation.cy.tsx
+++ b/packages/app/src/navigation/SidebarNavigation.cy.tsx
@@ -7,7 +7,6 @@ function mountComponent (initialNavExpandedVal = true) {
         <div class={[initialNavExpandedVal ? 'w-248px' : 'w-64px', 'transition-all', 'h-screen', 'grid', 'grid-rows-1']}>
           <SidebarNavigation />
         </div>
-        <div id="tooltip-target"/>
       </div>
     )
   })
@@ -30,11 +29,11 @@ describe('SidebarNavigation', () => {
   it('shows tooltips on hover', () => {
     mountComponent(false)
     cy.get('[data-cy="sidebar-header"').realHover()
-    cy.contains('#tooltip-target > div', 'test-project').should('be.visible')
+    cy.contains('.v-popper--some-open--tooltip', 'test-project').should('be.visible')
     cy.get('[data-cy="sidebar-header"]').trigger('mouseout')
 
     cy.get('[data-e2e-href="/runs"]').realHover()
-    cy.contains('#tooltip-target > div', 'Runs').should('be.visible')
+    cy.contains('.v-popper--some-open--tooltip', 'Runs').should('be.visible')
     cy.get('[data-e2e-href="/runs"]').trigger('mouseout')
   })
 
diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue
index 347add500f33..255b0866d705 100644
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -48,29 +48,34 @@
           />
         </RouterLink>
       </nav>
-      <SidebarTooltip
-        class="border border-transparent rounded
-              cursor-pointer m-16px p-7px
-              transform transition-all right-0
-              bottom-0 w-32px duration-300
-              inline-block absolute hover:border-gray-500"
-        :class="{ '-translate-y-48px': !isNavBarExpanded }"
+      <Tooltip
+        placement="right"
         :disabled="isNavBarExpanded"
-        :popper-top-offset="-4"
-        @click="bindingsOpen = true"
+        :distance="8"
+        :skidding="-16"
       >
-        <i-cy-command-key_x16
-          class="h-16px w-16px icon-dark-gray-500"
-          data-cy="keyboard-shortcuts"
-        />
+        <div
+          class="border border-transparent rounded
+              cursor-pointer h-32px m-16px
+              p-7px transform transition-all
+              right-0 bottom-0 w-32px duration-300
+              inline-block absolute hover:border-gray-500"
+          :class="{ '-translate-y-48px': !isNavBarExpanded }"
+          @click="bindingsOpen = true"
+        >
+          <i-cy-command-key_x16
+            class="h-16px w-16px icon-dark-gray-500"
+            data-cy="keyboard-shortcuts"
+          />
+        </div>
         <template #popper>
           {{ t('sideBar.keyboardShortcuts.title') }}
         </template>
-        <KeyboardBindingsModal
-          :show="bindingsOpen"
-          @close="bindingsOpen = false"
-        />
-      </SidebarTooltip>
+      </Tooltip>
+      <KeyboardBindingsModal
+        :show="bindingsOpen"
+        @close="bindingsOpen = false"
+      />
       <img
         :src="CypressLogo"
         class="h-32px m-16px w-32px"
@@ -87,7 +92,7 @@ import KeyboardBindingsModal from './KeyboardBindingsModal.vue'
 import CodeIcon from '~icons/cy/code-editor_x24'
 import RunsIcon from '~icons/cy/runs_x24'
 import SettingsIcon from '~icons/cy/settings_x24'
-import SidebarTooltip from './SidebarTooltip.vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import HideDuringScreenshot from '../runner/screenshot/HideDuringScreenshot.vue'
 import { SideBarNavigationDocument, SideBarNavigation_SetPreferencesDocument } from '../generated/graphql'
 import CypressLogo from '@packages/frontend-shared/src/assets/logos/cypress_s.png'
diff --git a/packages/app/src/navigation/SidebarNavigationHeader.vue b/packages/app/src/navigation/SidebarNavigationHeader.vue
index 5fa6c8d1b2b0..0d9529e2f8d8 100644
--- a/packages/app/src/navigation/SidebarNavigationHeader.vue
+++ b/packages/app/src/navigation/SidebarNavigationHeader.vue
@@ -1,36 +1,40 @@
 <template>
-  <SidebarTooltip
+  <Tooltip
     v-if="testingType"
-    class="border-b cursor-pointer flex border-gray-900 flex-shrink-0 h-64px pl-20px transition-all duration-300 items-center hover:bg-gray-900"
+    placement="right"
     :disabled="isNavBarExpanded"
-    :popper-top-offset="4"
-    popper-class="h-56px"
-    data-cy="sidebar-header"
-    tabindex="0"
-    @click="showModal = true"
-    @keydown.enter="showModal = true"
+    :distance="8"
   >
-    <SwitchTestingTypeModal
-      :show="showModal"
-      :gql="props.gql"
-      @close="showModal = false"
-    />
-    <component
-      :is="testingType.icon"
-      class="
-          flex-shrink-0 h-24px
-          mr-20px w-24px
-          icon-dark-jade-600 icon-light-jade-300
-          children:transition
-          children:duration-300"
-    />
-    <div class="text-gray-50 text-size-16px leading-24px truncate">
-      {{ props.gql.currentProject?.title ?? 'Cypress' }}
-      <p class="text-gray-600 text-size-14px leading-20px truncate">
-        {{ props.gql.currentProject?.branch }}
-      </p>
+    <div
+      class="border-b cursor-pointer flex border-gray-900 flex-shrink-0 h-64px pl-20px transition-all duration-300 items-center hover:bg-gray-900"
+      :popper-top-offset="4"
+      popper-class="h-56px"
+      data-cy="sidebar-header"
+      tabindex="0"
+      @click="showModal = true"
+      @keydown.enter="showModal = true"
+    >
+      <SwitchTestingTypeModal
+        :show="showModal"
+        :gql="props.gql"
+        @close="showModal = false"
+      />
+      <component
+        :is="testingType.icon"
+        class="
+            flex-shrink-0 h-24px
+            mr-20px w-24px
+            icon-dark-jade-600 icon-light-jade-300
+            children:transition
+            children:duration-300"
+      />
+      <div class="text-gray-50 text-size-16px leading-24px truncate">
+        {{ props.gql.currentProject?.title ?? 'Cypress' }}
+        <p class="text-gray-600 text-size-14px leading-20px truncate">
+          {{ props.gql.currentProject?.branch }}
+        </p>
+      </div>
     </div>
-
     <template #popper>
       <div class="text-left text-gray-50 text-size-16px leading-16px truncate">
         {{ props.gql.currentProject?.title ?? 'Cypress' }}
@@ -39,14 +43,14 @@
         </p>
       </div>
     </template>
-  </SidebarTooltip>
+  </Tooltip>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { gql, useSubscription } from '@urql/vue'
 import type { SidebarNavigationHeaderFragment } from '../generated/graphql'
-import SidebarTooltip from './SidebarTooltip.vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import SwitchTestingTypeModal from './SwitchTestingTypeModal.vue'
 import IconE2E from '~icons/cy/testing-type-e2e-solid-simple'
 import IconComponent from '~icons/cy/testing-type-component-solid_x64'
diff --git a/packages/app/src/navigation/SidebarNavigationRow.cy.tsx b/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
index 38a4c086a6f3..7caec767da9e 100644
--- a/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
+++ b/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
@@ -16,7 +16,6 @@ describe('SidebarNavigationRow', () => {
         <SidebarNavigationRow icon={TestResultsIcon} name="test-results" isNavBarExpanded/>
         <SidebarNavigationRow icon={PlaceholderIcon} name="placeholder" isNavBarExpanded/>
       </div>
-      <div id="tooltip-target"/>
     </div>))
   })
 })
diff --git a/packages/app/src/navigation/SidebarNavigationRow.vue b/packages/app/src/navigation/SidebarNavigationRow.vue
index f20c341e9d52..722ce5d6726b 100644
--- a/packages/app/src/navigation/SidebarNavigationRow.vue
+++ b/packages/app/src/navigation/SidebarNavigationRow.vue
@@ -1,44 +1,50 @@
 <template>
-  <SidebarTooltip
-    :class="active
-      ? 'before:(bg-indigo-300 scale-x-100 transition-colors) cursor-default'
-      : 'before:(scale-x-0 transition-transform bg-gray-300)'"
-    class="rounded-md
-      flex
-      h-40px
-      my-16px
-      w-full
-      min-w-40px
-      relative
-      items-center
-      group
-      focus-visible:outline-none
-      before:(rounded-r-md h-40px mr-4px text-transparent transform origin-left w-4px duration-300 content-open-square) hover:before:scale-x-100 "
+  <Tooltip
+    placement="right"
     :disabled="isNavBarExpanded"
-    :data-selected="active"
+    :distance="8"
   >
-    <component
-      :is="
-        icon"
-      :class="active ? 'icon-dark-indigo-300 icon-light-indigo-700' : 'icon-dark-gray-500 icon-light-gray-900 group-hover:(icon-dark-gray-300 icon-light-gray-800) group-focus:(icon-dark-gray-300 icon-light-gray-800)'"
-      class="flex-shrink-0 h-24px m-12px w-24px
-            children:transition children:duration-300"
-    />
-    <span
-      :class="[active ? 'text-indigo-300' : 'text-gray-500 group-hocus:text-gray-300']"
-      class="ml-8px transition-colors duration-300 truncate"
+    <div
+      v-bind="$attrs"
+      :class="active
+        ? 'before:(bg-indigo-300 scale-x-100 transition-colors) cursor-default'
+        : 'before:(scale-x-0 transition-transform bg-gray-300)'"
+      class="rounded-md
+        flex
+        h-40px
+        my-16px
+        w-full
+        min-w-40px
+        relative
+        items-center
+        group
+        focus-visible:outline-none
+        before:(rounded-r-md h-40px mr-4px text-transparent transform origin-left w-4px duration-300 content-open-square) hover:before:scale-x-100 "
+      :data-selected="active"
     >
-      {{ name }}
-    </span>
+      <component
+        :is="
+          icon"
+        :class="active ? 'icon-dark-indigo-300 icon-light-indigo-700' : 'icon-dark-gray-500 icon-light-gray-900 group-hover:(icon-dark-gray-300 icon-light-gray-800) group-focus:(icon-dark-gray-300 icon-light-gray-800)'"
+        class="flex-shrink-0 h-24px m-12px w-24px
+              children:transition children:duration-300"
+      />
+      <span
+        :class="[active ? 'text-indigo-300' : 'text-gray-500 group-hocus:text-gray-300']"
+        class="ml-8px transition-colors duration-300 truncate"
+      >
+        {{ name }}
+      </span>
+    </div>
     <template #popper>
       {{ name }}
     </template>
-  </SidebarTooltip>
+  </Tooltip>
 </template>
 
 <script lang="ts" setup>
 import type { FunctionalComponent, SVGAttributes } from 'vue'
-import SidebarTooltip from './SidebarTooltip.vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 
 withDefaults(defineProps <{
   icon: FunctionalComponent<SVGAttributes, {}>
diff --git a/packages/app/src/navigation/SidebarTooltip.vue b/packages/app/src/navigation/SidebarTooltip.vue
deleted file mode 100644
index 96ff33894cac..000000000000
--- a/packages/app/src/navigation/SidebarTooltip.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div
-    ref="wrapper"
-    @mouseenter="placeTooltip();showTooltip();"
-    @mouseleave="hideTooltip()"
-    @click="emit('click')"
-  >
-    <slot />
-    <teleport
-      v-if="!disabled && hover"
-      to="#tooltip-target"
-    >
-      <transition
-        name="enter-from-left"
-        enter-from-class="transition-all transform origin-left scale-x-0"
-        enter-to-class="transition-all transform origin-left scale-x-100"
-      >
-        <div
-          v-if="scaleUp"
-          class="rounded flex bg-gray-900
-                  h-40px mx-12px
-                  px-16px left-64px text-gray-50
-                  text-size-16px leading-24px absolute
-                  items-center
-                  content
-                  need-content before:border-solid before:border-transparent before:border-width-9px before:border-r-gray-900
-                  before:border-l-0 before:-mt-9px
-                  before:top-1/2 before:right-[99%] before:block before:absolute
-                  "
-          :class="popperClass"
-          :style="`top: ${tooltipTop}px`"
-          role="tooltip"
-        >
-          <slot name="popper" />
-        </div>
-      </transition>
-    </teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, nextTick } from 'vue'
-
-const props = withDefaults(defineProps<{
-  disabled?: boolean
-  popperTopOffset?: number
-  popperClass?: string
-}>(), {
-  disabled: false,
-  popperTopOffset: 0,
-  popperClass: '',
-})
-
-const emit = defineEmits(['click'])
-
-const hover = ref(false)
-const scaleUp = ref(false)
-const tooltipTop = ref(0)
-
-const wrapper = ref<HTMLDivElement | null>(null)
-
-// We cannot do this in onMounted because
-// top will changes after the bar is mounted
-function placeTooltip () {
-  const { y } = wrapper.value?.getBoundingClientRect() || { y: 0 }
-
-  tooltipTop.value = y + props.popperTopOffset
-}
-
-function showTooltip () {
-  if (hover.value) {
-    return
-  }
-
-  hover.value = true
-  nextTick(() => {
-    scaleUp.value = true
-  })
-}
-
-function hideTooltip () {
-  if (!hover.value) {
-    return
-  }
-
-  hover.value = false
-  scaleUp.value = false
-}
-
-</script>
-
-<style lang="scss" scoped>
-// This issue needs this line
-// https://github.com/windicss/windicss/issues/419
-.need-content:before{
-  content: ''
-}
-</style>
diff --git a/packages/app/src/runner/selector-playground/SelectorPlayground.vue b/packages/app/src/runner/selector-playground/SelectorPlayground.vue
index 739a5d9fe552..182f9b742e72 100644
--- a/packages/app/src/runner/selector-playground/SelectorPlayground.vue
+++ b/packages/app/src/runner/selector-playground/SelectorPlayground.vue
@@ -84,7 +84,14 @@
     </div>
 
     <div class="flex gap-12px">
-      <SelectorPlaygroundTooltip>
+      <Tooltip
+        :triggers="['click', 'touch']"
+        :hide-triggers="['hover']"
+        :distance="8"
+        auto-hide
+        :delay="{ hide: 2000 }"
+        hide-arrow
+      >
         <Button
           size="md"
           variant="outline"
@@ -102,9 +109,16 @@
             {{ t('runner.selectorPlayground.copyTooltip') }}
           </div>
         </template>
-      </SelectorPlaygroundTooltip>
-
-      <SelectorPlaygroundTooltip>
+      </Tooltip>
+
+      <Tooltip
+        :triggers="['click', 'touch']"
+        :hide-triggers="['hover']"
+        :distance="8"
+        auto-hide
+        :delay="{ hide: 2000 }"
+        hide-arrow
+      >
         <Button
           size="md"
           variant="outline"
@@ -122,7 +136,7 @@
             {{ t('runner.selectorPlayground.printTooltip') }}
           </div>
         </template>
-      </SelectorPlaygroundTooltip>
+      </Tooltip>
     </div>
   </div>
 </template>
@@ -133,9 +147,9 @@ import { useSelectorPlaygroundStore } from '../../store/selector-playground-stor
 import type { AutIframe } from '../aut-iframe'
 import type { EventManager } from '../event-manager'
 import Button from '@packages/frontend-shared/src/components/Button.vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
 import { useElementSize } from '@vueuse/core'
-import SelectorPlaygroundTooltip from './SelectorPlaygroundTooltip.vue'
 import { useI18n } from 'vue-i18n'
 import { useClipboard } from '@cy/gql-components/useClipboard'
 
diff --git a/packages/app/src/runner/selector-playground/SelectorPlaygroundTooltip.vue b/packages/app/src/runner/selector-playground/SelectorPlaygroundTooltip.vue
deleted file mode 100644
index 253ddebbb680..000000000000
--- a/packages/app/src/runner/selector-playground/SelectorPlaygroundTooltip.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div
-    class="relative"
-    @click="start()"
-  >
-    <slot />
-    <div
-      ref="tooltip"
-      class="rounded flex bg-gray-900 text-center opacity-0 p-8px transform transition-opacity top-0 left-[50%] text-gray-300 translate-y-[calc(-100%-4px)] translate-x-[-50%] duration-250 absolute pointer-events-none"
-      role="tooltip"
-      :class="[tooltipClass, {'opacity-100': isPending}]"
-    >
-      <slot name="popper" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useTimeoutFn } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-const tooltip = ref<HTMLDivElement>()
-
-const tooltipClass = computed(() => {
-  if (!tooltip.value) return ''
-
-  const { right } = tooltip.value.getBoundingClientRect()
-  const outerWidth = window.outerWidth
-
-  return (right > outerWidth) ? 'tooltip-overflow' : ''
-})
-
-const { start, isPending } = useTimeoutFn(() => {}, 2000, { immediate: false })
-
-</script>
-
-<style scoped>
-/* Created a class to override !important via greater specificity */
-div.tooltip-overflow {
-  @apply left-auto right-0 translate-x-0
-}
-</style>
diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
index 0edaf4f693ec..d3318e6563ad 100644
--- a/packages/frontend-shared/package.json
+++ b/packages/frontend-shared/package.json
@@ -46,6 +46,7 @@
     "dayjs": "^1.9.3",
     "fake-uuid": "^1.0.0",
     "faker": "5.5.3",
+    "floating-vue": "2.0.0-beta.12",
     "fuzzysort": "^1.1.4",
     "graphql": "^15.5.1",
     "graphql-relay": "^0.9.0",
diff --git a/packages/frontend-shared/src/components/Tooltip.cy.tsx b/packages/frontend-shared/src/components/Tooltip.cy.tsx
new file mode 100644
index 000000000000..7218a819295a
--- /dev/null
+++ b/packages/frontend-shared/src/components/Tooltip.cy.tsx
@@ -0,0 +1,24 @@
+import Tooltip from './Tooltip.vue'
+
+const slotContents = {
+  popper: () => <span>tooltip</span>,
+  default: () => <span class="default-slot">hello</span>,
+}
+
+describe('<Tooltip />', () => {
+  it('playground', () => {
+    cy.mount(() => {
+      return (
+        <div class="p-4 w-100px">
+          {/* @ts-ignore */}
+          <Tooltip v-slots={slotContents} placement="right" />
+        </div>
+      )
+    })
+
+    cy.get('.default-slot')
+    .realHover()
+
+    cy.contains('tooltip')
+  })
+})
diff --git a/packages/frontend-shared/src/components/Tooltip.vue b/packages/frontend-shared/src/components/Tooltip.vue
new file mode 100644
index 000000000000..001d75ef5c4c
--- /dev/null
+++ b/packages/frontend-shared/src/components/Tooltip.vue
@@ -0,0 +1,89 @@
+<template>
+  <Tooltip
+    :popper-class="{'no-arrow': hideArrow}"
+    :popper-hide-triggers="['hover']"
+  >
+    <slot />
+    <template #popper>
+      <slot name="popper" />
+    </template>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+
+withDefaults(defineProps<{
+  color?: string
+  hideArrow?: boolean
+}>(), {
+  color: 'dark',
+  hideArrow: false,
+})
+
+</script>
+
+<style lang="scss">
+@import "floating-vue/dist/style.css";
+.no-arrow {
+  .v-popper__arrow-container {
+    @apply hidden;
+  }
+}
+
+.v-popper__popper.v-popper--theme-tooltip {
+  .v-popper__inner {
+    @apply bg-gray-900 py-2 px-4;
+  }
+  .v-popper__arrow-inner,
+  .v-popper__arrow-outer {
+    // NOTE: we can't use @apply to here because having !important breaks things
+    border-color: #2e3247;
+  }
+
+  &[data-popper-placement="top"] {
+    .v-popper__wrapper {
+      transform: scaleY(0);
+      @apply origin-bottom transition-transform;
+    }
+
+    &.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+      transform: scaleY(1);
+    }
+  }
+
+  &[data-popper-placement="right"] {
+    .v-popper__wrapper {
+      transform: scaleX(0);
+      @apply origin-left transition-transform;
+    }
+
+    &.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+      transform: scaleX(1);
+    }
+  }
+
+  &[data-popper-placement="bottom"] {
+    .v-popper__wrapper {
+      transform: scaleY(0);
+      @apply origin-top transition-transform;
+    }
+
+    &.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+      transform: scaleY(1);
+    }
+  }
+
+  &[data-popper-placement="left"] {
+    .v-popper__wrapper {
+      transform: scaleX(0);
+      @apply origin-right transition-transform;
+    }
+
+    &.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+      transform: scaleX(1);
+    }
+  }
+}
+
+</style>
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
index dcbb6fca659b..3df084205554 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
@@ -20,7 +20,7 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     .should('be.visible')
     .closest('[data-cy="top-nav-browser-list-item"]')
     .within(() => {
-      cy.get('[data-cy="unsupported-browser-tooltip"]')
+      cy.get('[data-cy="unsupported-browser-tooltip-trigger"]')
       .should('not.exist')
     })
 
@@ -28,7 +28,7 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     .should('be.visible')
     .closest('[data-cy="top-nav-browser-list-item"]')
     .within(() => {
-      cy.get('[data-cy="unsupported-browser-tooltip"]')
+      cy.get('[data-cy="unsupported-browser-tooltip-trigger"]')
       .should('exist')
     })
 
@@ -172,12 +172,56 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     cy.contains(`${defaultMessages.topNav.updateCypress.title} 8.7.0`).should('not.exist')
   })
 
-  it('displays the active project name', () => {
+  it('displays the active project name and testing type', () => {
     cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
       render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><HeaderBarContent gql={gqlVal} /></div>,
     })
 
     cy.contains('test-project').should('be.visible')
+    cy.contains('e2e testing', { matchCase: false }).should('be.visible')
+  })
+
+  it('displays the branch name', () => {
+    cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
+      onResult: (result) => {
+        if (!result.currentProject) {
+          return
+        }
+
+        result.currentProject.branch = 'develop'
+      },
+      render: (gqlVal) => (
+        <div class="border-current border-1 h-700px resize overflow-auto">
+          <HeaderBarContent gql={gqlVal} />
+        </div>
+      ),
+    })
+
+    cy.contains('develop').should('be.visible')
+  })
+
+  it('truncates the branch name if it is long', () => {
+    cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
+      onResult: (result) => {
+        if (!result.currentProject) {
+          return
+        }
+
+        result.currentProject.branch = 'application-program/hard-drive-parse'
+      },
+      render: (gqlVal) => (
+        <div class="border-current border-1 h-700px resize overflow-auto">
+          <HeaderBarContent gql={gqlVal} />
+        </div>
+      ),
+    })
+
+    cy.get('.truncate').contains('application-program/hard-drive-parse').should('be.visible')
+
+    cy.percySnapshot()
+
+    cy.get('.truncate').realHover()
+    cy.get('.v-popper__popper--shown').contains('application-program/hard-drive-parse')
   })
 
   it('the login modal reaches "opening browser" status', () => {
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
index b089be86f5d4..09f60815a676 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="bg-white border-b border-b-gray-100 h-64px py-15px px-6">
+  <div
+    data-cy="header-bar-content"
+    class="bg-white border-b border-b-gray-100 h-64px py-15px px-6"
+  >
     <div class="flex h-full gap-12px items-center justify-between">
       <div
         v-if="pageName"
@@ -9,26 +12,92 @@
       </div>
       <div
         v-else
-        class="flex items-center children:font-medium children:leading-24px"
+        class="flex font-medium text-gray-700 items-center children:leading-24px"
       >
         <img
           class="h-32px mr-18px w-32px"
           src="../assets/logos/cypress-dark.png"
         >
-        <a
-          class="font-medium mr-2px"
-          :class="props.gql?.currentProject && !props.gql?.projectRootFromCI ? 'text-indigo-500 hocus-link-default' :
-            'text-gray-700'"
-          :href="props.gql?.currentProject && !props.gql?.projectRootFromCI ? 'global-mode' : undefined"
-          @click.prevent="clearCurrentProject"
+        <nav
+          role="navigation"
+          aria-label="Breadcrumbs"
         >
-          {{ t('topNav.global.projects') }}
-        </a>
-        <i-cy-chevron-right_x16
-          v-if="props.gql?.currentProject"
-          class="h-16px mr-2px min-w-16px icon-dark-gray-200"
-        />
-        <span class="text-body-gray-700">{{ props.gql?.currentProject?.title }}</span>
+          <ol>
+            <li class="inline-block">
+              <!-- context for use of aria role and disabled here: https://www.scottohara.me/blog/2021/05/28/disabled-links.html -->
+              <!-- the `href` given here is a fake one provided for the sake of assistive technology. no actual routing is happening. -->
+              <a
+                class="font-medium"
+                :class="hasLinkToProjects ? 'text-indigo-500 hocus-link-default' :
+                  'text-gray-700'"
+                :role="hasLinkToProjects ? undefined : 'link'"
+                :href="hasLinkToProjects ? 'global-mode' : undefined"
+                :ariaDisabled="!hasLinkToProjects"
+                @click.prevent="clearCurrentProject"
+              >
+                {{ t('topNav.global.projects') }}
+              </a>
+            </li>
+            <li
+              v-if="props.gql?.currentProject"
+              class="mx-2px align-middle inline-block"
+              aria-hidden
+            >
+              <i-cy-chevron-right_x16
+
+                class="icon-dark-gray-200"
+              />
+            </li>
+            <li class="inline-block">
+              <!-- context for use of aria role and disabled here: https://www.scottohara.me/blog/2021/05/28/disabled-links.html -->
+              <!-- the `href` given here is a fake one provided for the sake of assistive technology. no actual routing is happening. -->
+              <a
+                class="font-medium"
+                :role="hasLinkToCurrentProject ? undefined : 'link'"
+                :href="hasLinkToCurrentProject ? 'choose-testing-type' : undefined"
+                :class="hasLinkToCurrentProject ? 'text-indigo-500 hocus-link-default' :
+                  'text-gray-700'"
+                :ariaDisabled="!hasLinkToCurrentProject"
+                @click.prevent="clearTestingType"
+              >
+                {{ props.gql?.currentProject?.title }}
+              </a>
+              <template
+                v-if="props.gql?.currentProject?.branch"
+              >
+                <Tooltip
+                  placement="bottom"
+                  class="inline-block"
+                >
+                  <span
+                    class="font-normal max-w-200px text-gray-500 inline-block truncate align-top"
+                  >
+                    ({{ props.gql.currentProject.branch }})
+                  </span>
+                  <template #popper>
+                    {{ props.gql.currentProject.branch }}
+                  </template>
+                </Tooltip>
+              </template>
+            </li>
+            <li
+              v-if="props.gql?.currentProject?.currentTestingType"
+              class="mx-2px inline-block align-middle"
+              aria-hidden
+            >
+              <i-cy-chevron-right_x16
+
+                class="icon-dark-gray-200"
+              />
+            </li>
+            <li
+              v-if="props.gql?.currentProject?.currentTestingType"
+              class="lowercase inline-block"
+            >
+              {{ t(`testingType.${props.gql?.currentProject?.currentTestingType}.name`) }}
+            </li>
+          </ol>
+        </nav>
       </div>
       <div class="flex gap-6">
         <TopNav
@@ -86,7 +155,7 @@
         </TopNav>
         <div v-if="!userData">
           <button
-            class="flex text-gray-600 group items-center focus:outline-transparent"
+            class="flex text-gray-600 items-center group focus:outline-transparent"
             @click="openLogin"
           >
             <i-cy-profile_x16
@@ -109,7 +178,7 @@ import { gql, useMutation, useSubscription } from '@urql/vue'
 import { ref, computed } from 'vue'
 import type { HeaderBar_HeaderBarContentFragment } from '../generated/graphql'
 import {
-  GlobalPageHeader_ClearCurrentProjectDocument,
+  GlobalPageHeader_ClearCurrentProjectDocument, GlobalPageHeader_ClearCurrentTestingTypeDocument,
   HeaderBarContent_AuthChangeDocument,
 } from '../generated/graphql'
 import TopNav from './topnav/TopNav.vue'
@@ -120,6 +189,7 @@ import { useI18n } from '@cy/i18n'
 import ExternalLink from './ExternalLink.vue'
 import interval from 'human-interval'
 import { sortBy } from 'lodash'
+import Tooltip from '../components/Tooltip.vue'
 
 gql`
 fragment HeaderBarContent_Auth on Query {
@@ -157,6 +227,17 @@ mutation GlobalPageHeader_clearCurrentProject {
 }
 `
 
+gql`
+mutation GlobalPageHeader_ClearCurrentTestingType {
+  clearCurrentTestingType {
+    currentProject {
+      id
+      currentTestingType
+    }
+  }
+}
+`
+
 gql`
 fragment HeaderBar_HeaderBarContent on Query {
   currentProject {
@@ -164,6 +245,9 @@ fragment HeaderBar_HeaderBarContent on Query {
     title
     config
     savedState
+    currentTestingType
+    branch
+    isLoadingNodeEvents
   }
   projectRootFromCI
   ...TopNav
@@ -183,19 +267,34 @@ const cloudProjectId = computed(() => {
   return props.gql?.currentProject?.config?.find((item: { field: string }) => item.field === 'projectId')?.value
 })
 
+const hasLinkToProjects = computed(() => {
+  return props.gql?.currentProject && !props.gql?.projectRootFromCI
+})
+
+const hasLinkToCurrentProject = computed(() => {
+  return props.gql?.currentProject?.currentTestingType && !props.gql?.currentProject?.isLoadingNodeEvents
+})
+
 const isLoginOpen = ref(false)
 const clearCurrentProjectMutation = useMutation(GlobalPageHeader_ClearCurrentProjectDocument)
+const clearCurrentTestingTypeMutation = useMutation(GlobalPageHeader_ClearCurrentTestingTypeDocument)
 
 const openLogin = () => {
   isLoginOpen.value = true
 }
 
 const clearCurrentProject = () => {
-  if (props.gql.currentProject && !props.gql.projectRootFromCI) {
+  if (hasLinkToProjects.value) {
     clearCurrentProjectMutation.executeMutation({})
   }
 }
 
+const clearTestingType = () => {
+  if (hasLinkToCurrentProject.value) {
+    clearCurrentTestingTypeMutation.executeMutation({})
+  }
+}
+
 const props = defineProps<{
   gql: HeaderBar_HeaderBarContentFragment
   showBrowsers?: boolean
diff --git a/packages/frontend-shared/src/gql-components/topnav/UnsupportedBrowserTooltip.vue b/packages/frontend-shared/src/gql-components/topnav/UnsupportedBrowserTooltip.vue
deleted file mode 100644
index 387b1a148de0..000000000000
--- a/packages/frontend-shared/src/gql-components/topnav/UnsupportedBrowserTooltip.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <div
-    data-cy="unsupported-browser-tooltip"
-    @mouseenter="showTooltip()"
-    @mouseleave="hideTooltip()"
-  >
-    <slot />
-    <transition
-      :name="`unsupported-browser-enter-to-${placement}`"
-      :enter-from-class="`transition-all transform ${placement === 'top' ? 'origin-bottom' : 'origin-top'} scale-y-0`"
-      :enter-to-class="`transition-all transform ${placement === 'top' ? 'origin-bottom' : 'origin-top'} scale-y-100`"
-    >
-      <div
-        v-if="scaleUp"
-        class="rounded flex h-fit bg-gray-900
-                  text-center
-                  py-16px px-24px text-gray-300
-                  text-size-14px leading-20px z-40 absolute
-                  content need-content
-                  before:(border-solid border-transparent border-width-8px right-1/2
-                  block absolute) "
-        :class="{
-          'bottom-7 before:(top-full -mr-8px border-b-0 border-t-gray-900)': placement === 'top',
-          'top-7 before:(bottom-full -mr-8px border-t-0 border-b-gray-900)': placement === 'bottom'
-        }"
-        :style="`left: ${tooltipLeft}px; width: ${tooltipWidth}px`"
-        role="tooltip"
-      >
-        <slot name="popper" />
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// NOTE: This is not currently meant to be a widely-reusable tooltip, but it's probably most of the way there
-// It would need to be able to pop open on left & right and might also need a variable-width option instead of just fixed-width
-import { ref, nextTick, onMounted } from 'vue'
-
-const props = withDefaults(defineProps<{
-  placement?: string
-  tooltipWidth?: number
-}>(), {
-  placement: 'bottom',
-  tooltipWidth: 340,
-})
-
-const hover = ref(false)
-const scaleUp = ref(false)
-const tooltipLeft = ref(0)
-
-function placeTooltip () {
-  tooltipLeft.value = -1 * props.tooltipWidth / 2 + 8
-}
-
-onMounted(() => {
-  placeTooltip()
-})
-
-function showTooltip () {
-  if (hover.value) {
-    return
-  }
-
-  hover.value = true
-  nextTick(() => {
-    scaleUp.value = true
-  })
-}
-
-function hideTooltip () {
-  if (!hover.value) {
-    return
-  }
-
-  hover.value = false
-  scaleUp.value = false
-}
-
-</script>
-
-<style lang="scss" scoped>
-// This issue needs this line
-// https://github.com/windicss/windicss/issues/419
-.need-content:before{
-  content: ''
-}
-</style>
diff --git a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
index 12bdeff96bca..0274dadac484 100644
--- a/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue
@@ -54,17 +54,20 @@
           </template>
           <template v-else-if="!browser.isVersionSupported">
             <div class="h-16px relative">
-              <UnsupportedBrowserTooltip class="top-0 right-0 absolute">
-                <i-cy-circle-bg-question-mark_x16 class="icon-dark-gray-700 icon-light-gray-200" />
+              <Tooltip>
+                <i-cy-circle-bg-question-mark_x16
+                  class="icon-dark-gray-700 icon-light-gray-200"
+                  data-cy="unsupported-browser-tooltip-trigger"
+                />
                 <template #popper>
-                  <div class="w-full">
+                  <div class="text-center p-2 text-gray-300 text-size-14px leading-20px">
                     <div class="font-medium text-white mb-2">
                       Unsupported browser
                     </div>
                     {{ browser.warning }}
                   </div>
                 </template>
-              </UnsupportedBrowserTooltip>
+              </Tooltip>
             </div>
           </template>
         </div>
@@ -79,7 +82,7 @@ import type { VerticalBrowserListItemsFragment } from '../../generated/graphql'
 import { computed } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
-import UnsupportedBrowserTooltip from './UnsupportedBrowserTooltip.vue'
+import Tooltip from '../../components/Tooltip.vue'
 import sortBrowsers from '@packages/frontend-shared/src/utils/sortBrowsers'
 
 const { t } = useI18n()
diff --git a/packages/launchpad/cypress/e2e/open-mode.cy.ts b/packages/launchpad/cypress/e2e/open-mode.cy.ts
index 2ee3d9b75cc0..939944408c95 100644
--- a/packages/launchpad/cypress/e2e/open-mode.cy.ts
+++ b/packages/launchpad/cypress/e2e/open-mode.cy.ts
@@ -23,6 +23,7 @@ describe('Launchpad: Open Mode', () => {
     cy.scaffoldProject('todos')
     cy.openProject('todos', ['--e2e'])
     cy.visitLaunchpad()
+    cy.get('[data-cy=header-bar-content]').contains('e2e testing', { matchCase: false })
     // e2e testing is configured for the todo project, so we don't expect an error.
     cy.get('h1').should('contain', 'Choose a Browser')
   })
@@ -31,6 +32,7 @@ describe('Launchpad: Open Mode', () => {
     cy.scaffoldProject('launchpad')
     cy.openProject('launchpad', ['--component'])
     cy.visitLaunchpad()
+    cy.get('[data-cy=header-bar-content]').contains('component testing', { matchCase: false })
     // Component testing is not configured for the todo project
     cy.get('h1').should('contain', 'Project Setup')
   })
diff --git a/packages/launchpad/src/setup/OpenBrowserList.cy.tsx b/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
index 7b8c2d6a7cd4..b8e0ab9b84ff 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
+++ b/packages/launchpad/src/setup/OpenBrowserList.cy.tsx
@@ -45,8 +45,10 @@ describe('<OpenBrowserList />', () => {
         </div>),
     })
 
-    cy.get('[data-cy-browser="firefox"]:nth(2) [data-cy="unsupported-browser-tooltip"]')
+    cy.get('[data-cy-browser="firefox"]:nth(2) [data-cy="unsupported-browser-tooltip-trigger"]')
     .trigger('mouseenter')
+
+    cy.get('.v-popper__popper--shown')
     .contains('Cypress does not support running Firefox Developer Edition version 69.')
 
     cy.percySnapshot()
diff --git a/packages/launchpad/src/setup/OpenBrowserList.vue b/packages/launchpad/src/setup/OpenBrowserList.vue
index a74ed66bca56..c148501549e1 100644
--- a/packages/launchpad/src/setup/OpenBrowserList.vue
+++ b/packages/launchpad/src/setup/OpenBrowserList.vue
@@ -26,25 +26,24 @@
             'border-gray-200 before:hocus:cursor-pointer hover:border-indigo-300 hover:ring-2 hover:ring-indigo-100': !browser.disabled && browser.isVersionSupported && !checked && !browserStatus.chosen
           }"
         >
-          <UnsupportedBrowserTooltip
+          <Tooltip
             v-if="!browser.isVersionSupported"
-            class="top-0 right-0 absolute"
-            placement="top"
+            popper-class="max-w-lg"
           >
             <i-cy-circle-bg-question-mark_x16
               data-cy="unsupported-browser-tooltip-trigger"
-              class="mt-4px mr-8px relative inline-block icon-dark-gray-700 icon-light-gray-200"
+              class="mt-8px mr-8px top-0 right-0 inline-block absolute icon-dark-gray-700 icon-light-gray-200"
               alt="unsupported browser"
             />
             <template #popper>
-              <div class="w-full">
+              <div class="text-center p-2 text-gray-300 text-size-14px leading-20px">
                 <div class="font-medium text-white mb-2">
                   Unsupported browser
                 </div>
                 {{ browser.warning }}
               </div>
             </template>
-          </UnsupportedBrowserTooltip>
+          </Tooltip>
           <div class="text-center">
             <img
               :src="allBrowsersIcons[browser.displayName] || allBrowsersIcons.generic"
@@ -163,7 +162,7 @@ import PowerStandbyIcon from '~icons/cy/power-standby'
 import ArrowRightIcon from '~icons/cy/arrow-right_x16'
 import StatusRunningIcon from '~icons/cy/status-running_x16'
 import { RadioGroup, RadioGroupOption, RadioGroupLabel } from '@headlessui/vue'
-import UnsupportedBrowserTooltip from '@packages/frontend-shared/src/gql-components/topnav/UnsupportedBrowserTooltip.vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import sortBrowsers from '@packages/frontend-shared/src/utils/sortBrowsers'
 
 import type { OpenBrowserListFragment } from '../generated/graphql'
diff --git a/yarn.lock b/yarn.lock
index 6db82fa41e58..f2fdfab6cd36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3885,6 +3885,18 @@
   resolved "https://registry.yarnpkg.com/@ffprobe-installer/win32-x64/-/win32-x64-4.1.0.tgz#ed3e8a329eeb6c0625ac439e31ad9ec43001b33c"
   integrity sha512-gPW2FZxexzCAOhGch0JFkeSSln+wcL5d1JDlJwfSJVEAShHf9MmxiWq0NpHoCSzFvK5qwl0C58KG180eKvd3mA==
 
+"@floating-ui/core@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.3.1.tgz#3dde0ad0724d4b730567c92f49f0950910e18871"
+  integrity sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==
+
+"@floating-ui/dom@^0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.1.10.tgz#ce304136a52c71ef157826d2ebf52d68fa2deed5"
+  integrity sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==
+  dependencies:
+    "@floating-ui/core" "^0.3.0"
+
 "@fontsource/mulish@4.3.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@fontsource/mulish/-/mulish-4.3.0.tgz#cab651cc6f4cb4f532358e3a4958fdef610e9583"
@@ -22368,6 +22380,14 @@ flex-exec@^1.0.0:
   resolved "https://registry.yarnpkg.com/flex-exec/-/flex-exec-1.0.0.tgz#06974b68532839d2a12c32debcdb12378200fdf0"
   integrity sha1-BpdLaFMoOdKhLDLevNsSN4IA/fA=
 
+floating-vue@2.0.0-beta.12:
+  version "2.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-2.0.0-beta.12.tgz#078dafc4657163e2b58ebc0fc1cc7ac23343db93"
+  integrity sha512-3PJLDkU+qGL1c57SYpyBWBbpIrkscnneIG15ctgHQApc3FvlLemzGP2Bu8Adxe34UKhgdsV3vJl/RGuQ6NAqEw==
+  dependencies:
+    "@floating-ui/dom" "^0.1.10"
+    vue-resize "^2.0.0-alpha.1"
+
 flora-colossus@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/flora-colossus/-/flora-colossus-1.0.1.tgz#aba198425a8185341e64f9d2a6a96fd9a3cbdb93"
@@ -43925,6 +43945,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
 vue-router@4, vue-router@^4.0.0, vue-router@^4.0.11:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"