--- 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-08-07T06:05:14.633Z" 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 - [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md) - [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 Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md) - [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md) - [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md) - [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md) - [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md) - [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md) - [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.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) - [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md) - [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md) - [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md) - [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md) - [Deselect Text](/guides/web/knowledge-base/deselect-text.md) - [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md) - [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md) - [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.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) - [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md) - [Export Ink Annotation Image](/guides/web/knowledge-base/export-ink-annotation-image.md) - [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md) - [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md) - [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.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) - [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md) - [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md) - [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md) - [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md) - [Highlight required form fields](/guides/web/knowledge-base/highlight-required-fields.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 Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md) - [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md) - [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md) - [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md) - [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.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) - [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md) - [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md) - [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md) - [Link Text](/guides/web/knowledge-base/link-text.md) - [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md) - [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md) - [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md) - [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md) - [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md) - [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md) - [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md) - [Override User Agent](/guides/web/knowledge-base/override-user-agent.md) - [Overview](/guides/web/knowledge-base/overview.md) - [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md) - [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md) - [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md) - [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md) - [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md) - [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md) - [Programmatic Comment Annotations](/guides/web/knowledge-base/programmatic-comment-annotations.md) - [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md) - [Read-only forms](/guides/web/knowledge-base/read-only-forms.md) - [Render Document Full Height](/guides/web/knowledge-base/render-document-full-height.md) - [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md) - [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.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) - [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md) - [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md) - [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md) - [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.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) - [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md)