Tags

For tags, you can configure the tagConfig property within the annotation configuration. This allows you to enable or disable tags and define a custom function to determine the tag's content.

By default, tags are disabled. You can enable them by setting the enabled property to true. The tagFn function

 createAnnotatedText(id, {
  annotation: {
    tagConfig: {
      enabled: true,
      tagFn: (annotation) => annotation.label ?? "No label",
    },
  },
});

Some additional properties you can configure include:

• enabledOnHover: A boolean that determines whether the tag is displayed only on hover (true) or always visible ( false). The default is false.
• padding: A number that sets the padding around the tag. The default is 1.
• fontSize: A number that sets the font size of the tag text. The default is 8.

Example

Render highlight Render underline

Display tag

Display tag on hover