How to Display Tooltip on Annotation Hover in React PDF Viewer?

Description:

This article explains how to display a tooltip when hovering over annotations in a PDF document using the Syncfusion PDF Viewer component in a React application. This feature enhances user interaction by showing additional details (like the annotation author) when the mouse pointer hovers over an annotation.

Solution:

To show a tooltip on annotation hover, we can use the annotationMouseover and annotationMouseLeave event callbacks provided by the Syncfusion® PDF Viewer component. By combining these with the Syncfusion Tooltip control, we can display dynamic tooltips that follow the cursor and provide contextual information about the hovered annotation.

Prerequisites:

1. Syncfusion PDF Viewer Setup: Ensure that the Syncfusion PDF Viewer is installed and configured in your React project. Refer to the Getting Started documentation if you haven’t set it up yet.
2. Basic Knowledge of React: Familiarity with functional components, hooks like useEffect, and refs will be helpful for understanding the implementation.

Code Snippet

index.js

import { createRoot } from 'react-dom/client';
import './index.css';
import React, { useEffect, useRef } from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, 
         BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, 
         FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
import { Tooltip } from '@syncfusion/ej2-popups';

function Default() {
  let viewer;
  const tooltipRef = useRef(null);

  useEffect(() => {
    // Initialize the tooltip with mouse trail
    tooltipRef.current = new Tooltip({
      mouseTrail: true,
      opensOn: 'Custom',
    });
  }, []);

  function documentLoaded(args) {
    viewer.annotation.addAnnotation("Rectangle", {
      offset: { x: 150, y: 80 },
      pageNumber: 1,
      width: 150,
      height: 75  
    });   
  }

  // Show tooltip on annotation hover
  function annotationMouseOvered(args) {
    if (tooltipRef.current && viewer) {
      tooltipRef.current.appendTo(`#container_pageDiv_${viewer.currentPageNumber - 1}`);
      tooltipRef.current.content = args.annotation.author;
      tooltipRef.current.open();

      const tooltipElement = document.getElementsByClassName('e-tooltip-wrap')[0];
      if (tooltipElement) {
        tooltipElement.style.top = `${args.Y + 100}px`;
        tooltipElement.style.left = `${args.X}px`;
      }
    }
  }

  // Hide tooltip when mouse leaves annotation
  function annotationMouseLeaved() {
    if (tooltipRef.current) {
      tooltipRef.current.close();
    }
  }

  return (
    <div>
      <div className='control-section'>
        <PdfViewerComponent  
          ref={(scope) => { viewer = scope; }} 
          id="container" 
          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" 
          resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib" 
          style={{ 'height': '640px' }} 
          annotationMouseover={annotationMouseOvered} 
          annotationMouseLeave={annotationMouseLeaved} 
          documentLoad={documentLoaded}
        >
          <Inject services={[
            Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
            ThumbnailView, Print, TextSelection, TextSearch, 
            Annotation, FormFields, FormDesigner, PageOrganizer
          ]}/>
        </PdfViewerComponent>
      </div>
    </div>
  );
}

export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Key Features Used in the Code:

1. Annotation Events: annotationMouseover and annotationMouseLeave provide event hooks for hover interactions with annotations.
2. Tooltip Component: The Syncfusion Tooltip is configured with opensOn: 'Custom' to open programmatically, and mouseTrail: true to follow the cursor.
3. Dynamic Tooltip Positioning: Tooltip position is manually set using args.X and args.Y from the annotation hover event.

Sample:

You can find the full sample code in our GitHub repository.

Conclusion:

I hope you found this article helpful in learning how to show a tooltip on annotation hover in React PDF Viewer. This approach can also be extended to customize interactions based on user roles, allowing you to enhance document accessibility and security by displaying role-specific information or actions dynamically.

You can refer to React PDF feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums or feedback portal. We are always happy to assist you!