VeltComments
, VeltCommentTool
, and VeltCommentBubble
components.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.Comment Tool
component with Popover
comments:Comment Tool
next to each element you want to have Popover
commentsComment Tool
and use it to pin a Popover
comment on a particular elementComment Tool
near each cell or element you want to comment on. For example, in a table you could add this tool to each cell and show it on hover or right click context menu.targetElementId
prop on Comment Tool as the same unique ID that you added to the cell or element component.Comment Tool
, it will attach a Comment
to the target element.Comment
is added, you will notice a triangle on the top right corner of the element indicating that a Comment
is present on this element.Comment Tool
in a single location such as the navigation bar.data-velt-target-comment-element-id
attribute to each cell or element component. Both should have the same value.Comment Tool
and click on the target element, it will attach a Comment
to it.Comment Annotation
per element.data-velt-target-comment-element-id
attribute, you will be adding multiple Comment Annotations
on the same element.popoverTriangleComponent
prop to false
in the Velt Comments
component.targetElementId
as its associated elementcommentCountType
: 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.Popover
mode.By default, the triangle is enabled.Comment Tool
and leave a comment on the target element.