Search results

Display custom tooltip for annotations using Mouse over event in JavaScript PDF Viewer control

03 Dec 2021 / 1 minute to read

The PDF Viewer library allows you to customize the tooltip display for the annotations using the annotationMouseover and annotationMouseLeave events.

Step 1: Follow the steps provided in the link to create simple PDF Viewer sample.

Step 2: Add the following code snippet to display custom tooltip for the annotations.

Copied to clipboard
    viewer.annotationSettings.author = "syncfusion";

    let tooltip: Tooltip = new Tooltip({
      mouseTrail: true,
      opensOn: "Custom"
    });

    viewer.annotationMouseover = args => {
      tooltip.appendTo("#pdfViewer_pageDiv_" + (viewer.currentPageNumber - 1));
      tooltip.content = args.annotation.author;
      tooltip.open();
      let ele: any = document.getElementsByClassName("e-tooltip-wrap")[0];
      ele.style.top = args.Y + 100 + "px";
      ele.style.left = args.X + "px";
    };

    viewer.annotationMouseLeave = args => {
      tooltip.close();
    };

Find the Sample how to display custom tooltip for annotations using Mouse over event