How to Retrieve Tooltip and Click of Hyperlink in Angular PDF Viewer?

How to Retrieve the Tooltip Element and Capture the Click Event of the Hyperlink in a Form Field in the PDF Viewer

Description:

This article explains how to retrieve the tooltip element of a form field in the PDF Viewer and capture the click event of a hyperlink within the tooltip. The solution demonstrates how to use the Syncfusion Angular PDF Viewer to add form fields, display tooltips with hyperlinks, and listen for user interactions on the hyperlink inside the tooltip.

Solution:

To retrieve a tooltip with a hyperlink inside a form field and capture the click event, first add the form field with a tooltip containing an HTML hyperlink. After the document is loaded, use JavaScript to target the form field and tooltip. Add a mouseover event listener to the form field, and a click event listener to the hyperlink inside the tooltip, allowing you to capture user interactions.

Prerequisites:

Before diving into the implementation, ensure that the following steps are completed:

1. Syncfusion PDF Viewer Setup: Make sure the Syncfusion PDF Viewer is installed and set up in your Angular project. Follow the Getting Started with Syncfusion PDF Viewer for Angular guide if you haven’t already.
2. Basic Knowledge of Angular: Familiarity with Angular components and the basic setup of Angular projects will help you follow along with the implementation.

Code Snippets

Install and Configure Syncfusion PDF Viewer

First, install the necessary Syncfusion PDF Viewer modules and services in your Angular project. Make sure to import the required components and services.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  FormFieldsService,
  FormDesignerService,
  PrintService,
  LoadEventArgs,
  TextFieldSettings
} from '@syncfusion/ej2-angular-pdfviewer';

Create the PDF Viewer Component

In your component’s HTML file, set up the PDF Viewer element:

// Component Decorator to define metadata for the component
@Component({
  selector: 'app-root', // Selector used in HTML to reference this component
  // Inline HTML template for the component
  template: `
    <div class="content-wrapper">
      <div style="margin-top: 20px;"></div>
      <ejs-pdfviewer #pdfViewer
        id="pdfViewer"
        [documentPath]='document'
        (documentLoad)="documentLoaded($event)"
        [resourceUrl]='resource' 
        style="height:640px;display:block">
      </ejs-pdfviewer>
    </div>
  `,
  // Services provided by the component for PDF manipulation
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    FormFieldsService,
    FormDesignerService,
    PrintService
  ]
})

Add the Form Field with a Hyperlink Tooltip and Capture the Click Event

Use this code snippet to add a form field with a tooltip containing a hyperlink and then retrieve the tooltip element to capture the click event of the hyperlink.

export class AppComponent implements OnInit {
  // PDF document URL
  public document: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
  // Resource URL for PDF Viewer
  public resource: string = 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Init function - you can introduce initialization logic here
  }

  // Triggered when the document is loaded
  public documentLoaded(e: LoadEventArgs): void {
    // Fetch the PDF viewer instance
    const pdfviewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
    
      // Add a form field to the PDF
      pdfviewer.formDesignerModule.addFormField("Textbox", {
        name: "First Name",
        bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
        tooltip: '<a href="loaded">Google</a>'
      } as TextFieldSettings);
  
    // Obtain the form field element
    const formField = document.getElementsByClassName("e-pv-formfield-input")[0];
    
    // Add mouseover event listener to the form field
    formField.addEventListener("mouseover", () => {
      // Obtain the tooltip element
      const tooltip = document.getElementsByClassName("e-tooltip-wrap")[0];
      
      // Add click event listener on the tooltip
      tooltip.addEventListener("click", () => {
        alert("Hyperlink clicked in the tooltip!");
      });
    });
  }
}

Key Features Used in the Code:

1. TextFieldSettings: The settings used to define the properties of a text field in the PDF, including the tooltip with HTML content.
2. Tooltip Handling: The functionality that allows for the addition of tooltips to form fields and event listeners to capture interactions with hyperlinks in the tooltips.

Sample Link:

You can find the full sample in our GitHub repository.

Conclusion:

I hope you enjoyed learning how to retrieve tooltip and click of hyperlink in Angular PDF Viewer?

You can refer to Angular 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 Angular 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, Direct-Trac, or feedback portal. We are always happy to assist you!