YouTipEvent Pagey
## jQuery event.pageY Property
The `event.pageY` property is a built-in jQuery event property that returns the vertical coordinate (Y-axis) of the mouse pointer, relative to the top edge of the document.
This property is highly useful for tracking mouse movements, creating custom tooltips, drag-and-drop interfaces, and rendering elements dynamically at the user's cursor position.
---
## Syntax
```javascript
event.pageY
```
### Parameter Values
| Parameter | Description |
| :--- | :--- |
| `event` | **Required.** The event object passed into the event handler function. |
---
## Definition and Usage
* The `event.pageY` property provides the absolute vertical position of the cursor in pixels, relative to the entire HTML document.
* **Note:** If the page is scrolled vertically, `event.pageY` accounts for the scrolled distance. This makes it different from `event.clientY`, which only returns coordinates relative to the visible viewport.
* **Tip:** This property is almost always used in conjunction with the [`event.pageX`](event-pagex.html) property to obtain the full 2D coordinates (X, Y) of the cursor.
---
## Code Examples
### Example 1: Tracking Mouse Coordinates in Real-Time
The following example tracks the mouse movement across the entire document and displays the current X and Y coordinates in a `` element.
```javascript
$(document).mousemove(function(event) {
// Update the text of the span with the current cursor coordinates
$("span").text("X-Coordinate: " + event.pageX + ", Y-Coordinate: " + event.pageY);
});
```
### Example 2: Displaying a Custom Tooltip at the Cursor Position
You can use `event.pageX` and `event.pageY` to position a custom HTML element (like a tooltip) exactly where the user clicks.
```javascript
$(document).click(function(event) {
// Position a custom tooltip div at the cursor's click location
$("#custom-tooltip").css({
"left": event.pageX + "px",
"top": event.pageY + "px",
"display": "block"
});
});
```
---
## Considerations & Best Practices
1. **Page Scroll vs. Viewport:**
* `event.pageY` measures from the very top of the **document** (including off-screen scrolled content).
* If you need coordinates relative to the browser's **visible viewport** (ignoring scrollbars), use the vanilla JavaScript `event.clientY` property instead.
2. **Performance Optimization:**
* Binding functions to high-frequency events like `mousemove` can cause performance lag. If you are tracking `event.pageY` continuously, consider throttling or debouncing the event handler to ensure smooth rendering.
3. **Cross-Browser Compatibility:**
* Standardizing mouse event coordinates across older browsers (like IE8 and below) used to be difficult. jQuery's `event.pageY` normalizes these differences automatically, ensuring consistent behavior across all modern and legacy browsers.