progress

src/core/client/stream/components/Comment.tsx

@@ -2,6 +2,7 @@ import cn from "classnames";
 import React from "react";
 import { StatelessComponent } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
+import { Manager, Popper, Reference } from "react-popper";
 import { Button, Input, Popover, Typography } from "talk-ui/components";
 import * as styles from "./Comment.css";
 
@@ -27,6 +28,27 @@ const Comment: StatelessComponent<CommentProps> = props => {
         {props.author && props.author.username}
       </Typography>
       <Typography>{props.body}</Typography>
+      <Manager>
+        <Reference>
+          {({ ref }) => (
+            <button type="button" ref={ref}>
+              Reference element
+            </button>
+          )}
+        </Reference>
+        <Popper
+          placement="left"
+          modifiers={{ preventOverflow: { enabled: false } }}
+          eventsEnabled
+          positionFixed={false}
+        >
+          {({ ref, style, placement, arrowProps }) => (
+            <div ref={ref} style={style} data-placement={placement}>
+              Popper element
+            </div>
+          )}
+        </Popper>
+      </Manager>
       <div className={cn("talk-comment-footer")}>
         <Popover
           body={