diff --git a/src/App.vue b/src/App.vue
index 8a5d7612..bc4a2a81 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -136,7 +136,7 @@
       </div>
       <sparc-tooltip placement="top-center" is-repeating-item-content>
         <div slot="data">Only show this tooltip if content is cutoff</div>
-        <p slot="item">Only show tooltip when this has ellipsis</p>
+        <div class="tooltip-item" slot="item">Only show tooltip when this has ellipsis</div>
       </sparc-tooltip>
       <el-row type="flex" justify="center">
         <el-select
@@ -961,4 +961,9 @@ export default {
 .metadata-title {
   font-weight: 500;
 }
+.tooltip-item {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/SparcTooltip/src/SparcTooltip.vue b/src/components/SparcTooltip/src/SparcTooltip.vue
index b0306c83..69273d57 100644
--- a/src/components/SparcTooltip/src/SparcTooltip.vue
+++ b/src/components/SparcTooltip/src/SparcTooltip.vue
@@ -14,6 +14,9 @@
 </template>
 
 <script>
+
+import { pathOr, isEmpty } from 'ramda'
+
 const PLACEMENTS = Object.freeze({
   'top-left': 'bottom-start',
   'top-center': 'bottom',
@@ -79,15 +82,15 @@ export default {
     onEnterTooltip(e) {
       // Hide the tooltip if it is simply repeating the items content and the items content is not cut off
       if (!this.isRepeatingItemContent) { return }
-      const target = e.target
-      this.hidden = target.scrollWidth <= target.offsetWidth
+      const targetElement = pathOr(null, ['target', 'firstChild'], e)
+      if (isEmpty(targetElement)) { return }
+      this.hidden = targetElement.scrollWidth <= targetElement.offsetWidth
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .tooltip-item {
-  display: flex;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;