diff --git a/src/Inspector/Inspector.tsx b/src/Inspector/Inspector.tsx
index 8e67664e..ea187230 100644
--- a/src/Inspector/Inspector.tsx
+++ b/src/Inspector/Inspector.tsx
@@ -39,6 +39,13 @@ export interface InspectorProps {
    * whether disable click react component to open IDE for view component code
    */
   disableLaunchEditor?: boolean,
+  /**
+   * custom handler for component name and info display
+   * @param name component name
+   * @param info component info (file path)
+   * @returns [displayName, displayInfo] tuple for display
+   */
+  handleCodeInfo?: (name: string, info?: string) => [string, string],
 }
 
 export const Inspector: React.FC<InspectorProps> = (props) => {
@@ -47,6 +54,7 @@ export const Inspector: React.FC<InspectorProps> = (props) => {
     onHoverElement,
     onClickElement,
     disableLaunchEditor,
+    handleCodeInfo,
     children,
   } = props
 
@@ -63,7 +71,7 @@ export const Inspector: React.FC<InspectorProps> = (props) => {
   }
 
   const startInspect = () => {
-    const overlay = new Overlay()
+    const overlay = new Overlay(handleCodeInfo)
     overlayRef.current = overlay
 
     const stopCallback = setupHighlighter({
diff --git a/src/Inspector/Overlay.tsx b/src/Inspector/Overlay.tsx
index f3243bfe..741e193b 100644
--- a/src/Inspector/Overlay.tsx
+++ b/src/Inspector/Overlay.tsx
@@ -179,8 +179,10 @@ export default class Overlay {
   tip: OverlayTip
   rects: Array<OverlayRect>
   removeCallback: (this: Overlay) => void
+  handleCodeInfo?: (name: string, info?: string) => [string, string]
 
-  constructor() {
+  constructor(handleCodeInfo?: (name: string, info?: string) => [string, string]) {
+    this.handleCodeInfo = handleCodeInfo
     // Find the root window, because overlays are positioned relative to it.
     const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window
     this.window = currentWindow
@@ -283,12 +285,25 @@ export default class Overlay {
       }
     }
 
-    this.tip.updateText(
-      name,
-      info,
-      outerBox.right - outerBox.left,
-      outerBox.bottom - outerBox.top,
-    )
+    const width = outerBox.right - outerBox.left
+    const height = outerBox.bottom - outerBox.top
+
+    if (this.handleCodeInfo) {
+      const [displayName, displayInfo] = this.handleCodeInfo(name || '', info)
+      this.tip.updateText(
+        displayName,
+        displayInfo,
+        width,
+        height,
+      )
+    } else {
+      this.tip.updateText(
+        name || '',
+        info,
+        width,
+        height,
+      )
+    }
     const tipBounds = getNestedBoundingClientRect(
       this.tipBoundsWindow.document.documentElement,
       this.window,