---
title: "Add annotation tooltip in JavaScript PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/customizing-the-interface/annotation-tooltips/"
md_url: "https://www.nutrient.io/guides/web/customizing-the-interface/annotation-tooltips.md"
last_updated: "2026-05-14T21:57:26.972Z"
description: "Nutrient Web SDK supports showing contextual tooltips when an annotation is selected."
---

# Adding contextual tooltips to annotations in viewer

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

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch Demo](https://www.nutrient.io/demo/contextual-tooltip/)

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 [`ToolItem`](https://www.nutrient.io/api/web/NutrientViewer.ToolItem.html)s, then Nutrient shows a tooltip for the annotation.

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

### ES6+

```js

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;
});

```

### JAVASCRIPT

```js

var pspdfkitInstance;

var duplicateAnnotationTooltipCallback = function (annotation) {
  // Check if the annotation is a text annotation.
  if (annotation instanceof NutrientViewer.Annotations.TextAnnotation) {
    // This is the tooltip item that will be used.
    var duplicateItem = {
      type: "custom",
      title: "Duplicate",
      id: "tooltip-duplicate-annotation",
      className: "TooltipItem-Duplication",
      onPress: function () {
        // For the new annotation, copy the current one but
        // translate the annotation for 50px so your users see the
        // duplicated annotation.
        var 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.
        var 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 [];
  }
};

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

```
---

## Related pages

- [Hide the delete button in the annotation toolbar](/guides/web/user-interface/annotations/hide-the-delete-button.md)
- [Customizing the annotation inspector in our viewer](/guides/web/user-interface/annotations/inspector.md)
- [Mastering annotation presets in your PDF viewer](/guides/web/user-interface/annotations/presets.md)
- [Customizing annotation variant buttons in the toolbar](/guides/web/user-interface/annotations/variant-buttons.md)
- [Adding stamp annotations in our JavaScript PDF viewer](/guides/web/user-interface/annotations/stamps.md)