frontend: introducing DocStringComponent

frontend/src/components/DocStringComponent.tsx

@@ -0,0 +1,23 @@
+import { Badge, Tooltip, OverlayTrigger } from 'react-bootstrap';
+import React from 'react';
+
+interface DocStringProps {
+  docString?: string;
+}
+
+export const DocStringComponent = React.memo((props: DocStringProps) => {
+  const { docString } = props;
+  if (!docString) {
+    return null; // render nothing if docString is not provided
+  }
+
+  const tooltip = <Tooltip id="tooltip">{docString}</Tooltip>;
+
+  return (
+    <OverlayTrigger placement="bottom" overlay={tooltip}>
+      <Badge pill className="tooltip-trigger" bg="light" text="dark">
+        ?
+      </Badge>
+    </OverlayTrigger>
+  );
+});