Annotations Pop up

[Emmanuel Tweneboah]

Hi, 

i am working on some document annotations project using syncfusion pdf viewer. 

After saving annotations, i can't make the comments pop up when i hover over the annoted texts unless i click on the text twice before the comment panel will open for me to see the comments made. 

is the a way? 

[Shamini Kiruba Sobers]

Hi Emmanuel, 

We don’t have support to open the comment panel on hovering over the annotations and there are no immediate plans to implement this. You can use the IsCommandPanelOpen property to show the comment panel on loading the document itself. 

API reference link: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_IsCommandPanelOpen 

Regards, 

Shamini 

[Emmanuel Tweneboah]

I meant to view the comment been made not the comment panel itself. 

you see when I hover over North America..... i want The comments and replies to pop up. 

That's what I want to know if Syncfusion has that Feature. 

Thank You. 

[Shamini Kiruba Sobers]

Hi Emmanuel, 

We don’t have support to show the comments and replies of annotation as a popup on a mouse hover. But we do have several events that capture the actions of annotations. Kindly use the AnnotationMouseover event which gets triggered on the mouse over the annotation object. Within this event call, you can show popups to achieve your requirement in the sample level. 

API reference link: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_AnnotationMouseover 

Regards, 

Shamini 

[Emmanuel Tweneboah]

Hi Shamini, 

Sorry to bother you but can you show me a sample? 

I'm using mvc asp.netcore 

Regards 

Emmanuel 

[Shamini Kiruba Sobers]

Hi Emmanuel, 

 

We are checking to achieve your requirement in a sample. We will update further details on February 17, 2022. 

 

Meanwhile, you have mentioned that you are using MVC ASP.NET Core, which is confusing. Could you please confirm whether you are using ASP.NET Core or ASP.NET MVC? 

 

Regards, 

Shamini 

[Emmanuel Tweneboah]

Hi Shamini, 

I'm using Asp.net core. 

Regards. 

Emmanuel. 

[Shamini Kiruba Sobers]

Hi Emmanuel, 

 

Thanks for the update. We have created a workaround sample to display the author, the number of replies, and comments on hovering over the annotation as below. 

 

Code snippet: 

 

<div style="width:100%;height:1200px"> 

 

    <ejs-tooltip id="Tooltip" content="guest" opensOn="Custom"> 

        <e-content-template> 

            <div id="target" style="margin: 50px;"> 

 

            </div> 

            <ejs-pdfviewer id="pdfviewer" serviceUrl="/api/PdfViewer" documentPath="PDF_Succinctly.pdf" annotationMouseLeave="annotationMouseLeave" annotationMouseover="annotationMouseover" rectangleSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerRectangleSettings {Author="User 2"})"></ejs-pdfviewer> 

        </e-content-template> 

    </ejs-tooltip> 

 

</div> 

 

<script> 

    function annotationMouseover(args) { 

        var viewer = document.getElementById('pdfviewer').ej2_instances[0]; 

        var tooltip = document.getElementById('Tooltip').ej2_instances[0]; 

        tooltip.opensOn = "Hover"; 

        tooltip.mouseTrail = true; 

        var annotationCollection = args.annotationBounds.controlParent.annotationCollection; 

        var comment = ""; 

        var replies = 0; 

        for (var i = 0; i < annotationCollection.length; i++) { 

            if (args.annotationId == annotationCollection[i].annotationId) { 

                comment = annotationCollection[i].note; 

                replies = annotationCollection[i].comments.length; 

            } 

        } 

        tooltip.content = args.annotation.author + "    (" + replies + " replies)" + "<br/>" + comment; 

    } 

 

    function annotationMouseLeave(args) { 

        var tooltip = document.getElementById('Tooltip').ej2_instances[0]; 

        tooltip.close(); 

    } 

</script> 

 

<style> 

    #tooltip { 

        height: 40px; 

        left: 45%; 

        position: absolute; 

        top: 45%; 

        width: auto; 

    } 

</style> 

 

 

ASP.NET Core sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted_Core374871826 

 

Steps to run the sample: 

* Download the sample from the below link. 

* Draw an annotation and Mouse over the annotation, the tooltip will be displayed with the annotation’s author as tooltip content. 

* To hide the tooltip, we need to click on the annotation. 

Output screenshot: 

 

 

Regards, 

Shamini