diff --git a/packages/entities/entities-shared/package.json b/packages/entities/entities-shared/package.json
index 6a0e7cd597..5df209aeb8 100644
--- a/packages/entities/entities-shared/package.json
+++ b/packages/entities/entities-shared/package.json
@@ -65,11 +65,12 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "564KB"
+    "errorLimit": "600KB"
   },
   "dependencies": {
     "@kong-ui-public/core": "workspace:^",
     "@kong/icons": "^1.13.0",
-    "compare-versions": "^6.1.0"
+    "compare-versions": "^6.1.0",
+    "swrv": "^1.0.4"
   }
 }
diff --git a/packages/entities/entities-shared/sandbox/pages/EntityTooltipPage.vue b/packages/entities/entities-shared/sandbox/pages/EntityTooltipPage.vue
new file mode 100644
index 0000000000..1923506d52
--- /dev/null
+++ b/packages/entities/entities-shared/sandbox/pages/EntityTooltipPage.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="sandbox-container">
+    <main>
+      <h3>Entity Tooltip</h3>
+      <EntityTooltip
+        :entity-config="tooltipConfig"
+        :external-link="'https://www.google.com'"
+      />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ConfigurationSchemaType, EntityTooltip } from '../../src'
+import type { EntityTooltipConfig } from '../../src/types'
+import { computed } from 'vue'
+
+
+const tooltipData = () => (Promise.resolve({
+  label: 'Test',
+  items: [
+    {
+      key: 'item-1',
+      label: 'Name',
+      value: 'My name',
+    },
+    {
+      key: 'item-2',
+      label: 'Badges',
+      value: ['badge1', 'badge2'],
+      type: ConfigurationSchemaType.BadgeTag,
+    },
+    {
+      key: 'item-3',
+      label: 'Some ID',
+      value: 'my-unique-id',
+      type: ConfigurationSchemaType.ID,
+    },
+    {
+      key: 'item-4',
+      label: 'ID Array',
+      value: ['item1', 'item2'],
+      type: ConfigurationSchemaType.IdArray,
+    },
+    {
+      key: 'item-5',
+      label: 'Redacted ID',
+      value: 'my-unique-id',
+      type: ConfigurationSchemaType.Redacted,
+    },
+    {
+      key: 'item-6',
+      label: 'Redacted Array',
+      value: ['item1', 'item2'],
+      type: ConfigurationSchemaType.RedactedArray,
+    },
+    {
+      key: 'item-7',
+      label: 'Date',
+      value: 1686245746,
+      type: ConfigurationSchemaType.Date,
+    },
+  ],
+}))
+
+const tooltipConfig = computed < EntityTooltipConfig>(() => ({
+  id: 'entity-id',
+  title: 'Title',
+  deleted: false,
+  data: tooltipData,
+}))
+
+</script>
diff --git a/packages/entities/entities-shared/sandbox/routes.ts b/packages/entities/entities-shared/sandbox/routes.ts
index 0accb82ca3..fa27d90e2c 100644
--- a/packages/entities/entities-shared/sandbox/routes.ts
+++ b/packages/entities/entities-shared/sandbox/routes.ts
@@ -71,4 +71,10 @@ export const routes: Array<RouteRecordRaw & { label?: string }> = [
     label: 'SandboxPermissionsControl',
     component: () => import('./pages/SandboxPermissionsControlPage.vue'),
   },
+  {
+    path: '/entity-tooltip',
+    name: 'entity-tooltip',
+    label: 'EntityToolip',
+    component: () => import('./pages/EntityTooltipPage.vue'),
+  },
 ]
diff --git a/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue b/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue
new file mode 100644
index 0000000000..1323592c82
--- /dev/null
+++ b/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue
@@ -0,0 +1,134 @@
+<template>
+  <KPop
+    hide-close-icon
+    placement="bottom"
+    trigger="hover"
+    width="300"
+  >
+    <div class="label-wrapper">
+      <ConnectionsIcon :size="KUI_ICON_SIZE_30" />
+      <span class="label">{{ tooltipData?.label }}</span>
+    </div>
+    <template
+      v-if="tooltipData?.items"
+      #content
+    >
+      <div class="tooltip-content">
+        <ConfigCardItem
+          v-for="item in tooltipData.items"
+          :key="item.key"
+          :item="item"
+          slim
+          truncated
+        />
+      </div>
+    </template>
+    <template #footer>
+      <div class="footer-container">
+        <KExternalLink
+          :href="externalLink"
+          new-window
+        >
+          View
+        </KExternalLink>
+        <KExternalLink
+          v-if="exploreLink"
+          :href="exploreLink"
+          new-window
+        >
+          Explore
+        </KExternalLink>
+      </div>
+    </template>
+  </KPop>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import ConfigCardItem from '../entity-base-config-card/ConfigCardItem.vue'
+import useSWRV from 'swrv'
+import { ConnectionsIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import type { EntityTooltipConfig, TooltipData } from '../../types'
+
+const props = defineProps({
+  entityConfig: {
+    type: Object as PropType<EntityTooltipConfig>,
+    required: true,
+  },
+  externalLink: {
+    type: String,
+    required: true,
+  },
+  exploreLink: {
+    type: String,
+    required: false,
+    default: null,
+  },
+})
+
+const { data: tooltipData } = useSWRV<TooltipData>(
+  () => `entity-tooltip-${props.entityConfig.id}`,
+  async () => {
+
+    const items = await props.entityConfig.data()
+
+    return items
+  },
+  {
+    refreshInterval: 0,
+    revalidateOnFocus: false,
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+:deep(.config-card-details-row) {
+  padding: $kui-space-30 $kui-space-0 $kui-space-30 0 !important;
+}
+
+:deep(.config-card-details-value) {
+  display: flex !important;
+  justify-content: end !important;
+  overflow: hidden;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  width: 60% !important;
+
+  .copy-text {
+    max-width: 15ch !important;
+    overflow: hidden;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+}
+
+:deep(.config-card-details-label) {
+  width: 40% !important;
+}
+
+.label-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: $kui-space-20;
+
+  .label {
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-style: dashed;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+  }
+}
+
+.tooltip-content {
+  margin: $kui-space-40;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 $kui-space-40 0 $kui-space-40;
+  width: 100%;
+}
+</style>
diff --git a/packages/entities/entities-shared/src/index.ts b/packages/entities/entities-shared/src/index.ts
index d9f50e8e6c..09cbe39f6c 100644
--- a/packages/entities/entities-shared/src/index.ts
+++ b/packages/entities/entities-shared/src/index.ts
@@ -12,13 +12,14 @@ import EntityFormSection from './components/entity-form-section/EntityFormSectio
 import EntityLink from './components/entity-link/EntityLink.vue'
 import JsonCodeBlock from './components/common/JsonCodeBlock.vue'
 import YamlCodeBlock from './components/common/YamlCodeBlock.vue'
+import EntityTooltip from './components/entity-tooltip/EntityTooltip.vue'
 import composables from './composables'
 
 // Extract specific composables to export
 const { useAxios, useDeleteUrlBuilder, useErrors, useExternalLinkCreator, useFetchUrlBuilder, useFetcher, useDebouncedFilter, useStringHelpers, useHelpers, useGatewayFeatureSupported, useTruncationDetector, useValidators } = composables
 
 // Components
-export { EntityBaseConfigCard, ConfigCardItem, ConfigCardDisplay, InternalLinkItem, EntityBaseForm, EntityBaseTable, EntityDeleteModal, EntityFilter, EntityToggleModal, PermissionsWrapper, EntityFormSection, EntityLink, JsonCodeBlock, YamlCodeBlock }
+export { EntityBaseConfigCard, ConfigCardItem, ConfigCardDisplay, InternalLinkItem, EntityBaseForm, EntityBaseTable, EntityDeleteModal, EntityFilter, EntityToggleModal, PermissionsWrapper, EntityFormSection, EntityLink, JsonCodeBlock, YamlCodeBlock, EntityTooltip }
 
 // Composables
 export { useAxios, useDeleteUrlBuilder, useErrors, useExternalLinkCreator, useFetchUrlBuilder, useFetcher, useDebouncedFilter, useStringHelpers, useHelpers, useGatewayFeatureSupported, useTruncationDetector, useValidators }
diff --git a/packages/entities/entities-shared/src/types/entity-tooltip-types.ts b/packages/entities/entities-shared/src/types/entity-tooltip-types.ts
new file mode 100644
index 0000000000..0f2ba91335
--- /dev/null
+++ b/packages/entities/entities-shared/src/types/entity-tooltip-types.ts
@@ -0,0 +1,27 @@
+import type { RecordItem } from './entity-base-config-card'
+
+
+export const entityTypes = [
+  'api_product',
+  'api_product_version',
+  'control_plane',
+  'control_plane_group',
+  'data_plane_node',
+  'gateway_service',
+  'route',
+  'application',
+  'consumer',
+] as const
+
+export type EntityType = typeof entityTypes[number]
+
+export interface TooltipData {
+  items: RecordItem[] | null,
+  label: string,
+}
+
+export interface EntityTooltipConfig {
+  deleted: boolean
+  id: string,
+  data: () => Promise<TooltipData>
+}
diff --git a/packages/entities/entities-shared/src/types/index.ts b/packages/entities/entities-shared/src/types/index.ts
index b072faa8a0..beffb18490 100644
--- a/packages/entities/entities-shared/src/types/index.ts
+++ b/packages/entities/entities-shared/src/types/index.ts
@@ -11,3 +11,4 @@ export * from './entity-base-config-card'
 export * from './entity-filter'
 export * from './entity-link'
 export * from './utils'
+export * from './entity-tooltip-types'
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 18cbf9528e..39ff1a3fce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: false
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -933,6 +929,9 @@ importers:
       compare-versions:
         specifier: ^6.1.0
         version: 6.1.0
+      swrv:
+        specifier: ^1.0.4
+        version: 1.0.4(vue@3.4.27)
     devDependencies:
       '@kong-ui-public/i18n':
         specifier: workspace:^
@@ -3556,7 +3555,7 @@ packages:
     resolution: {integrity: sha512-854ioZ/FB5DNiJcMinD9/a6dj6h/poOsKcb4POhPTzMSM0fHLIQUp//Ufhx7qL6qsepwtLapkgZ3/hAYN7lnBg==}
     requiresBuild: true
     dependencies:
-      '@babel/runtime-corejs3': 7.22.15
+      '@babel/runtime-corejs3': 7.24.4
       '@swagger-api/apidom-core': 0.99.2
       '@swagger-api/apidom-error': 0.99.0
       '@swagger-api/apidom-ns-openapi-3-1': 0.99.2
@@ -3598,7 +3597,7 @@ packages:
     resolution: {integrity: sha512-vgCRaqDLI/SmTECZeKO47RGFFx6MCpOcbSm60sV0/ZJxeK+TgkNjIRJTyuRQNts44K863CWgY+bwzzn1zhNqUg==}
     requiresBuild: true
     dependencies:
-      '@babel/runtime-corejs3': 7.22.15
+      '@babel/runtime-corejs3': 7.24.4
       '@swagger-api/apidom-ast': 0.99.2
       '@swagger-api/apidom-core': 0.99.2
       '@types/ramda': 0.29.8
@@ -3627,7 +3626,7 @@ packages:
     resolution: {integrity: sha512-Rn2YeQKxj6hSijQAzGRRxMYDRIedqHjE69z9xigVbvm+iDXxLJIwasuzFa7BIMRDZF5eAJkBPHXTiU9cXVsl6w==}
     requiresBuild: true
     dependencies:
-      '@babel/runtime-corejs3': 7.22.15
+      '@babel/runtime-corejs3': 7.24.4
       '@swagger-api/apidom-core': 0.99.2
       '@swagger-api/apidom-error': 0.99.0
       '@swagger-api/apidom-ns-json-schema-draft-6': 0.99.2
@@ -3696,7 +3695,6 @@ packages:
 
   /@swagger-api/apidom-ns-openapi-3-1@0.99.2:
     resolution: {integrity: sha512-ubO8vi1dYpIV2a3IKhTkBCf125udoCeUZIc9wrhOFwwHHIKeInGR5L6yxlNhOQm0/doYCth77vEqcuTBpxaIrw==}
-    requiresBuild: true
     dependencies:
       '@babel/runtime-corejs3': 7.22.15
       '@swagger-api/apidom-ast': 0.99.2
@@ -3943,7 +3941,7 @@ packages:
       '@swagger-api/apidom-ns-asyncapi-2': 0.99.2
       '@swagger-api/apidom-ns-openapi-2': 0.99.2
       '@swagger-api/apidom-ns-openapi-3-0': 0.99.2
-      '@swagger-api/apidom-ns-openapi-3-1': 0.99.1
+      '@swagger-api/apidom-ns-openapi-3-1': 0.99.2
       '@swagger-api/apidom-ns-workflows-1': 0.99.2
       '@swagger-api/apidom-parser-adapter-api-design-systems-json': 0.99.2
       '@swagger-api/apidom-parser-adapter-api-design-systems-yaml': 0.99.2
@@ -5389,6 +5387,9 @@ packages:
 
   /ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependenciesMeta:
+      ajv:
+        optional: true
     dependencies:
       ajv: 8.12.0
     dev: true
@@ -16232,3 +16233,7 @@ packages:
   /zenscroll@4.0.2:
     resolution: {integrity: sha512-jEA1znR7b4C/NnaycInCU6h/d15ZzCd1jmsruqOKnZP6WXQSMH3W2GL+OXbkruslU4h+Tzuos0HdswzRUk/Vgg==}
     dev: false
+
+settings:
+  autoInstallPeers: false
+  excludeLinksFromLockfile: false