Adding contextual tooltips to annotations in viewer

Nutrient Web SDK supports showing contextual tooltips when an annotation is selected.

Try for Free Launch Demo

To add tooltips, define the annotationTooltipCallback in the configuration object that gets used to load Nutrient. Every time an annotation is selected, Nutrient calls this function with the selected annotation. When the function returns an array of ToolItems, then Nutrient shows a tooltip for the annotation.

As an example, implement a tooltip that will be able to duplicate text annotations:

let pspdfkitInstance;


const duplicateAnnotationTooltipCallback = (annotation) => {
  // Check if the annotation is a text annotation.
  if (annotation instanceof NutrientViewer.Annotations.TextAnnotation) {
    // This is the tooltip item that will be used.
    const duplicateItem = {
      type: "custom",
      title: "Duplicate",
      id: "tooltip-duplicate-annotation",
      className: "TooltipItem-Duplication",
      onPress: () => {
        // For the new annotation, copy the current one but
        // translate the annotation for 50px so your users see the
        // duplicated annotation.
        const newBoundingBox = annotation.boundingBox
          .set("top", annotation.boundingBox.top + 50)
          .set("left", annotation.boundingBox.left + 50);
        // To make duplication work, you also need to remove the ID
        // of the annotation.
        const duplicatedAnnotation = annotation
          .set("id", null)
          .set("boundingBox", newBoundingBox);
        // In the end, you just use `createAnnotation` on your
        // Nutrient instance.
        pspdfkitInstance.create(duplicatedAnnotation);
      }
    };
    return [duplicateItem];
  } else {
    return [];
  }
};


NutrientViewer.load({
  ...configuration,
  annotationTooltipCallback: duplicateAnnotationTooltipCallback
}).then(instance => {
  pspdfkitInstance = instance;
});