Skip to content

display-custom-tool-tip-for-annotations.md

Latest commit

 

History

History
42 lines (34 loc) · 1.54 KB

display-custom-tool-tip-for-annotations.md

File metadata and controls

42 lines (34 loc) · 1.54 KB
Raw
layout post
title Display custom annotation tooltip in PDF Viewer | Syncfusion
description Learn how to display a custom tooltip for annotations in the JavaScript PDF Viewer using the annotationMouseover and annotationMouseLeave events.
platform document-processing
control PDF Viewer
documentation ug
domainurl

Display a custom tooltip for annotations in PDF Viewer

Display custom tooltips for annotations by handling the annotationMouseover and annotationMouseLeave events.

  • Include the JavaScript PDF Viewer script and the Annotation module on the page.
  • Include the ej.popups module or equivalent tooltip library used in the example.
  • Ensure the viewer instance is initialized before attaching the event handlers.

Example: show a tooltip on mouse over

viewer.annotationSettings.author = "syncfusion";
var tooltip = new ej.popups.Tooltip({
    mouseTrail: true,
    opensOn: "Custom"
});
viewer.annotationMouseOver = function(args) {
    tooltip.appendTo("#pdfViewer_pageDiv_" + (viewer.currentPageNumber - 1));
    tooltip.content = args.annotation.author;
    tooltip.open();
    var ele = document.getElementsByClassName("e-tooltip-wrap")[0];
    ele.style.top = args.Y + 100 + "px";
    ele.style.left = args.X + "px";
};
viewer.annotationMouseLeave = function(args) {
    tooltip.close();
};

Sample: Display a custom tooltip for annotations sample on StackBlitz