Popover Setup

Import the VeltComments, VeltCommentTool, and VeltCommentBubble components.

import {
  VeltProvider,
  VeltComments,
  VeltCommentTool,
  VeltCommentBubble
} from '@veltdev/react';

Add the VeltComments component to the root of your app and mark the popoverMode property as true.

This component is required to render comments in your app.

Popover mode means that comments can be attached to specific target elements. The UX pattern is very similar to commenting in Google Sheets.

<VeltProvider apiKey="API_KEY">
  <VeltComments popoverMode={true}/>
</VeltProvider>

There are two patterns to add the Comment Tool component with Popover comments:

• Add a Comment Tool next to each element you want to have Popover comments
• Have a single Comment Tool and use it to pin a Popover comment on a particular element

a. Comment Tool next to each element

In Popover Mode, you can add a Comment Tool near each cell or element you want to comment on.

Add the <VeltCommentTool>component on each component where you want to enable commenting.

For example, in a table you could add this tool to each cell and show it on hover or right click context menu.

You must specify a target element ID which binds the tool to that element. When users click on the Comment Tool, it will attach a Comment to the target element.

Once the Comment is saved, you will notice a triangle on the top right corner of the element indicating that a Comment is present on this element.

<div className="table">
  <div className="cell" id="cell-id-1">
    <VeltCommentTool
      targetCommentElementId="cell-id-1"
    />
  </div>
  <div className="cell" id="cell-id-2">
    <VeltCommentTool
      targetCommentElementId="cell-id-2"
    />
  </div>
</div>

b. Single Comment Tool

If you want to have a single Comment Tool in a single location such as the navigation bar, you can do so as well.

To do this, add data-velt-target-comment-element-id as an attribute on each element you want to add comments on.

Now, when you click on the Comment Tool and click on the target element, it will attach a Popover comment to the element.

You will now notice that you can only add one Comment Annotation per element.

<div>
  <VeltCommentTool />
  <div className="table">
    <div className="cell" data-velt-target-comment-element-id="cell-id-A" id="cell-id-A">

    </div>
    <div className="cell" data-velt-target-comment-element-id="cell-id-B" id="cell-id-B">

    </div>
  </div>
</div>

This component accepts a target element ID & binds the comment annotation to it.

It shows the total number of replies in the given comment annotation. You also have the option to choose whether to display the total number of replies or just the unread replies.

This gives you a lot of flexibility as you can place this component anywhere and provides a more obvious affordance to your users.

Props: commentCountType: This prop allows you to decide which count to display.

• total: Shows the total number of replies. (default)
• unread: Shows the number of unread replies.

<div className="table">
  <div className="cell" id="cell-id-1">
    <VeltCommentTool
      targetCommentElementId="cell-id-1"
    />
    <VeltCommentBubble
      commentCountType={"unread"}
      targetCommentElementId="cell-id-1"
    />
  </div>
  <div className="cell" id="cell-id-2">
    <VeltCommentTool
      targetCommentElementId="cell-id-2"
    />
    <VeltCommentBubble
      commentCountType={"unread"}
      targetCommentElementId="cell-id-2"
    />
  </div>
</div>

You can choose to remove the triangle that appears in Popover mode.

By default, the triangle is enabled.

<VeltComments popoverTriangleComponent={false}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.enablePopoverTriangleComponent();
commentElement.disablePopoverTriangleComponent();

Test it out by opening the page with Velt components in your browser.

Click on the Comment Tool and leave a comment on the target element.