--- title: "Listen to an annotation’s hover event | Nutrient Web SDK" canonical_url: "https://www.nutrient.io/guides/web/knowledge-base/annotations-hover-event/" md_url: "https://www.nutrient.io/guides/web/knowledge-base/annotations-hover-event.md" last_updated: "2026-05-29T15:33:59.526Z" description: "Learn how to listen for annotation hover events in your web PDF viewer using Nutrient Web SDK. Implement interactive annotation behavior with custom renderers." --- # Listen to an annotation’s hover event The SDK doesn’t emit a native “hover” event for annotations. However, you can simulate this behavior using standard DOM event listeners. The following example detects hover events for most annotation types: ```js NutrientViewer.load(defaultConfiguration).then((instance) => { instance.contentDocument.addEventListener( "mouseover", ({ target }) => { if ( target && (target.closest(".PSPDFKit-Annotation") || target.classList.contains("PSPDFKit-Annotation")) ) { // The annotation ID can be obtained from the `data-annotation-id` attribute of // the closest `.PSPDFKit-Annotation` element. console.log("Annotation hovered"); } } ); }); ``` For annotation types such as text, markup, and links, the method above doesn’t work because the annotation types use custom hit testing logic. To detect hover events on these annotation types, use the [Custom Renderers API](https://www.nutrient.io/api/web/NutrientViewer.CustomRenderers.html) as demonstrated in the following code snippet: ```js let pspdfkitInstance; // Global or module-level variable. NutrientViewer.load({...baseOptions, toolbarItems: [...NutrientViewer.defaultToolbarItems, { type: "cloudy-rectangle", dropdownGroup: "shapes" }, { type: "dashed-rectangle", dropdownGroup: "shapes" }, { type: "cloudy-ellipse", dropdownGroup: "shapes" }, { type: "dashed-ellipse", dropdownGroup: "shapes" }, { type: "dashed-polygon", dropdownGroup: "shapes" }, { type: "content-editor", dropdownGroup: "editor" }, { type: "form-creator", dropdownGroup: "editor" }, { type: "measure", dropdownGroup: "editor" }, { type: "document-comparison", dropdownGroup: "editor" } ], customRenderers: { Annotation: ({ annotation }) => { if ( annotation instanceof NutrientViewer.Annotations.TextAnnotation || annotation instanceof NutrientViewer.Annotations.MarkupAnnotation || annotation instanceof NutrientViewer.Annotations.LinkAnnotation ) { const node = document.createElement("div"); node.style.cssText = "position: absolute; width: 100%; height: 100%; pointer-events: all"; const mouseoverListener = function () { console.log( `Hovered text annotation with ID: ${annotation.id}` ); }; node.addEventListener("mouseover", mouseoverListener); return { node, append: true }; } } } }).then((instance) => { pspdfkitInstance = instance; // Assign instance to the global/module. variable instance.contentDocument.addEventListener( "mouseover", ({ target }) => { if ( target && (target.closest(".PSPDFKit-Annotation") || target.classList.contains("PSPDFKit-Annotation")) ) { // The annotation ID can be obtained from the `data-annotation-id` attribute of // the closest `.PSPDFKit-Annotation` element. console.log("Annotation hovered"); } } ); }); ``` --- ## Related pages - [How to add a custom toolbar item to display current zoom percentage](/guides/web/knowledge-base/add-custom-zoom-perentage.md) - [Add Listener Text Note Annotation](/guides/web/knowledge-base/add-listener-text-note-annotation.md) - [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md) - [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md) - [Add Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md) - [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md) - [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md) - [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md) - [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.md) - [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md) - [Keep widget annotation dimensions consistent across devices](/guides/web/knowledge-base/consistent-widget-annotation-dimensions.md) - [Control Appearance Of Delete Button On Ink Annotations](/guides/web/knowledge-base/control-appearance-of-delete-button-on-ink-annotations.md) - [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md) - [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md) - [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md) - [Deselect Text](/guides/web/knowledge-base/deselect-text.md) - [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md) - [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md) - [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.md) - [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md) - [Export Ink Annotation Image](/guides/web/knowledge-base/export-ink-annotation-image.md) - [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md) - [Disable Resize Of Annotations](/guides/web/knowledge-base/disable-resize-of-annotations.md) - [How to disable text annotation movement in web apps](/guides/web/knowledge-base/disable-text-annotation-movement.md) - [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md) - [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.md) - [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md) - [Focus Viewer After Loading](/guides/web/knowledge-base/focus-viewer-after-loading.md) - [Focus Widget Annotation](/guides/web/knowledge-base/focus-widget-annotation.md) - [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md) - [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md) - [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md) - [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md) - [Highlight required form fields](/guides/web/knowledge-base/highlight-required-fields.md) - [How Do I Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md) - [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md) - [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md) - [How Do I Disable Scrolling On Page Edges](/guides/web/knowledge-base/how-do-i-disable-scrolling-on-page-edges.md) - [How Do I Zoom To A Specific Value](/guides/web/knowledge-base/how-do-i-zoom-to-a-specific-value.md) - [How To Create Bookmarks From Outline Elements](/guides/web/knowledge-base/how-to-create-bookmarks-from-outline-elements.md) - [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md) - [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md) - [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.md) - [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md) - [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md) - [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md) - [Link Text](/guides/web/knowledge-base/link-text.md) - [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md) - [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md) - [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md) - [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md) - [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md) - [Nutrient Size Optimization](/guides/web/knowledge-base/nutrient-size-optimization.md) - [Override User Agent](/guides/web/knowledge-base/override-user-agent.md) - [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md) - [Overview](/guides/web/knowledge-base/overview.md) - [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md) - [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md) - [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md) - [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md) - [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md) - [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md) - [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md) - [Render Document Full Height](/guides/web/knowledge-base/render-document-full-height.md) - [Programmatic Comment Annotations](/guides/web/knowledge-base/programmatic-comment-annotations.md) - [Read-only forms](/guides/web/knowledge-base/read-only-forms.md) - [Render Page Without Annotations](/guides/web/knowledge-base/render-page-without-annotations.md) - [Render Visible Area In Current Page](/guides/web/knowledge-base/render-visible-area-in-current-page.md) - [Render Watermark When Printing](/guides/web/knowledge-base/render-watermark-when-printing.md) - [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.md) - [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md) - [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md) - [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md) - [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md) - [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md) - [Show Focus Ring Read Only](/guides/web/knowledge-base/show-focus-ring-read-only.md) - [Submit Ink Signatures With Form](/guides/web/knowledge-base/submit-ink-signatures-with-form.md) - [Wait For Element Appear](/guides/web/knowledge-base/wait-for-element-appear.md) - [Web Sdk Vs Dws Viewer](/guides/web/knowledge-base/web-sdk-vs-dws-viewer.md) - [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.md)